DOM(Document Object Model 문서 객체 모델)은 HTML에 접근하여 Object(JavaScript Object)처럼 HTML을 조작할 수 있는 Model이라는 의미. 즉 Dom은 HTML을 오브젝트의 관점에서 보는 방법이자 모델.
웹 페이지는 일종의 문서(Document)이며 DOM은 HTML/XML 문서의 프로그래밍 인터페이스로써 웹 페이지의 모든 콘텐츠를 객체로 나타냄(DOM은 document 객체를 통해 HTML에 접근한다). DOM은 문서의 구조화된 표현을 제공하여 자바스크립트가 DOM 구조에 접근하여 스타일이나 내용 등을 변경할 수 있도록 해줌. (HTML 태그 자체가 모두 객체이며 객체지향 언어인 자바스크립트가 HTML 객체에 접근하는 것으로 이해하면 쉬움)
이런 객체는 node라는 계층적 단위에 정보를 저장함. HTML 문서는 노드 트리라고 부르는 계층적 구조에 저장되는데 DOM은 이 노드를 정의하고 노드 사이의 관계를 보여줌. DOM은 위 이미지처럼 태그 트리 구조로 표현함. document.body는 <body> 태그를 객체로 나타낸 것. DOM은 Javascript와 DOM API가 내장된 Browser로 다룰 수 있다.
Element는 nodeType 중의 하나로 만약 nodeType이 1이라면 ElementNode가 되며, Element는 다시 id, class, children 등의 프로퍼티를 갖는다.
DOM 트리 출력(DOM 구조 조회) : console.log(document.body)
요소를 DOM 객체로 취급하여 출력(객체 속성 확인시 편리함) : console.dir(document.body)
자식 엘리먼트 조회 document.body.children
부모 엘리먼트 조회 element.parentElement
const container = document.body.children[1]
container.parentElement // body
트리 구조는 1개의 부모가 n개의 자식을 가지는 구조가 반복되는 점이 특징. 엘리먼트를 조회하는 코드 역시 이런 특징을 이용한 로직으로 작성. A class 이름을 콘솔로 찍고 → 자식 엘리먼트가 있는지 확인하고 → B class 이름을 콘솔로 찍고 → 자식 엘리먼트가 있는지 확인... 이런식으로 반복.