DOM 탐색

출처 : https://ko.javascript.info/dom-navigation

요소간 콘텐츠 이용하기 위한 과정

조작 전에 DOM 객체에 접근하는 것이 필수

DOM 객체 -> 접근하기 위한 '진입점'

---

자식 노드 탐색

자식 노드 : 바로 아래의 자식 요소를 나타냄

후손 노드 : 중첩 관계에 있는 모든 요소를 의미 (자식 노드 + 그 보다 자식 노드)

모든 노드에 적용 가능한 탐색 프로퍼티

• parentNode : 해당 노드의 부모 노드 반환
• childNodes : 해당 노드에 대한 자식 노드들 반환
• firstChild : 첫 번째 노드 반환 (= childNodes[0])
• lastChild : 마지막 노드 반환 (= childNodes(list.childNodes.length - 1)
• previousSibling : 해당 노드와 같은 층의 전 노드 반환
• nextSibling : 해당 노드와 같은 층의 다음 노드 반환

요소 노드에만 적용 가능한 탐색 프로퍼티

• parentElement : 부모 요소 반환
• children : 자식 요소들 반환 (text node 포함x)
• firstElementChild : 첫 번째 자식 요소 반환 (text node 포함x)
• lastElementChild : 마지막 자식 요소 반환 (text node 포함x)
• previousElementSibling : 전 형제 요소 반환
• nextElementSibling : 다음 형제 요소 반환
  
  

---

DOM 컬렉션

childNodes ? 배열이 아닌 컬렉션

=> 반복이 가능

특징

1. forEach(), for...of 사용 가능 (for .. in은 불가능)

2. 배열이 아니므로 배열 메소드 사용 불가능

3. 배열 메소드 사용하고싶다면 Array.from() 사용