브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 도와주는 객체모델로 브라우저의 새창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역 객체로는 window가 있으면 하위 객체로는 locaiton, navigator, document, screen, history가 포함되어 있다.
웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다. 최상위 인터페이스로 Node가 있으면 아래의 사진과 같은 구조고 나타난다.
*위의 구조를 보면 엘리먼트 뿐만 아니라, 텍스트와 주석까지도 DOM Tree에 포함된다.
<!DOCTYPE html><html> <head> <title>제목</title> </head> <body> <div class="클래스"></div> <!-- 주석 --> <a href="https://naver.com">네이버</a> </body> </html>
*Live DOM Viewer 를 사용해서 DOM 트리를 구성해 본것으로 엘리먼트 뿐만 아니라 텍스트 노드와 주석 노드까지 포함하고 있다. 이제 이런 DOM을 다루기 위해선 getElementsById , querySelector , firstElementChild 등과 같은 브라우저가 제공하는 DOM API를 사용하면 된다.