DOM 탐색하기

• DOM 조작하려면 DOM 객체에 접근하는 것이 선행되어야 함

• DOM 수행하는 모든 연산은 document 객체(DOM 에 접근하기 위한 ‘진입점’)에서 시작

• DOM 트리는 document, document.documentElement, document.body/head 순으로 관계 이루어짐

• document 가 제공하는 프로퍼티를 사용해 DOM 트리 상단의 노드에 접근 가능

• document.documentElement 로 DOM 트리 꼭대기에 있는 html 노드 접근

• document.body 로 body 노드 접근

• document.head 로 head 노드 접근

• 스크립트가 읽는 도중에 존재하지 않는 요소에 접근할 시 null 출력

• DOM 에서 null은 ‘존재하지 않음’이나 ‘해당 노드 없음’ 의미

• 자식 노드는 바로 아래의 자식 요소를 나타내고 후손 노드는 중첩 관계에 있는 모든 요소를 나타냄

• 탐색 프로퍼티는 모든 노드에 적용 가능한 프로퍼티, 요소 노드에만 작용 가능한 프러퍼티로 나누어짐

• childNodes 컬렉션은 텍스트 노드 포함한 모든 자식 노드 담고 있으며 유사 유사 배열 객체(이터러블 객체)인 컬렉션 반환하기 때문에 for..of(for..in 반복문 사용 시 ‘추가 프로퍼티’ 까지 접근하기 때문에 지양) 사용 가능하며 배열 메서드 사용 불가능(Array.from 으로 배열로 만들수 있음)

• firstChild/lastChild 프로퍼티 사용하여 첫번째/마지막 자식 노드에 접근

• DOM 컬렉션은 읽는 것만 가능하며 변경시 전용 메서드 필요하며 현재 상태를 반영(DOM 노드 변경 시 바로 반영)

• 같은 부모를 가진 노드를 형제 노드라고 부르며 다음(오른쪽)/이전(왼쪽) 노드에 대한 정보는 nextSibling/previousSibling 프로퍼티로 접근

• childElement 컬렉션은 해당 요소의 자식 노드 중 요소 노드 만을 가리키며 여러 접근 메서드 존재

• 부모 요소 노드 프로퍼티에서 부모가 요소가 아닐 시 null 반환

• 테이블과 같은 몇몇 DOM 요소는 추가 프로퍼티와 컨텐츠에 접속할 수 있게 해주는 컬렉션 제공