[JS] BOM 과 DOM의 차이

 

 

BOM(Browser Object Model)
자바스크립트가 브라우저와 소통하기 위해 만들어진 모델

window	최상위객체, 각 프레임 별로 하나씩 존재
navigator	브라우저명, 버전 정보를 속성으로 가짐
document	현재 문서에 대한 정보
location	현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL
history	현재의 브라우저가 접근했던 URL history
screen	브라우저의 외부환경에 대한 정보 제공

 

 

 

DOM(Document Object Model)
브라우저가 웹문서를 이해할 수 있도록 구성된 것
HTML 이나 XML 등의 문서를 객체로 표현할 때 사용되는 API

 

문서노드(Document Node)	트리 최상위에 존재
	각각의 하위요소들에 접근하려면 문서노드를 통해야함(시작점)
요소노드(Element Node)	쉽게 말해 tag 태그임
	<p> <div> <span> 등
어트리뷰트노드(Attribute Node)	<input>태그안에는 name,value 등의 속성을 사용할 수 있는데 이러한 속성을 가리키는 노드
텍스트노드(Text Node)	태그 내 텍스트를 표현
	DOM 트리 최종단(자신의 자식 노드를 가질 수 X)
	예를 들어 <span>안녕</span>에서 텍스트 노드는 '안녕'임

 

DOM과 XML

- DOM은 트리구조로 표현하기 때문에 쉽게 이해 가능

- XMLHttpRequest 객체는 응답텍스트(responseText) 대신 XML(responseXML) 응답결과를 사용할 수 있는데

  이 때 DOM API를 사용해서 서버가 생성한 XML로부터 데이터를 추출할 수 있음

- 다음장 'ajax-response' 에서 자세히!