브라우저 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조 DOM 생성
DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
노드 객체들로 구성된 트리 자료구조를 DOM = DOM 트리
HTML요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 노드 객체로 변환.
문서노드 → document 객체
요소노드 → HTML 요소
어트리뷰트노드 → HTML요소의 어트리뷰트
텍스트노드 → HTML요소의 텍스트를 가르키는 객체
※모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받음
추가로 문서 노드는 Document,HTMLDocument
어트리뷰트 노드는 Attr
텍스트 노드는 CharacterData 인터페이스 각각 상속
요소 노드는 Element, HTMLElement와 종류별로 세분화된 인터페이스를 상속
id를 이용한 요소 노드 취득
.getElementById
태그 이름을 이용한 요소 노드 취득
.getElementByTagName
CSS선택자를 이용한 요소 노드 취득
.querySelector
특정 요소 노드를 취득할 수 있는지 확인
.matches
HTMLCollection, NodeList → DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체
HTMLCollection
- getElementsByTagName, getElementsByClassName 메서드가 반환
NodeList
- HTMLCollection 객체의 부작용을 해결하기 위해 getElementsByTagName, getElementsByClassName 메서드 대신 querySelectorAll 메서드 사용
