트리 상단의 documentElement와 body
✔️ <html> = document.documentElement
✔️ <body> = document.body
✔️ <head> = document.head
childNodes, firstChild, lastChild로 자식 노드 탐색하기
✔️ childNodes : 모든 자식 노드를 담고 있다. 요소의 자식 노드들을 탐색할 수 있다.
for(let i=0; i<document.body.childNodes.length; i++){
console.log(document.body.childNodes[i]); //Text, DIV, Text, UL, ... , SCRIPT
}✔️ firstChild : 첫번째 자식을 지정
✔️ lastChild : 마지막 자식을 지정
❗️ 위의 DOM 요소들은 읽기 전용이다. 자식 노드를 변경하는 것이 불가능하다.
형제와 부모 노드
✔️ nextSibling : 다음 형제에 대한 노드 정보
✔️ previousSibling : 이전 형제 노드에 대한 정보
✔️ parentNode : 부모 노드에 대한 정보
요소 간 이동
✔️ 실무에서는 텍스트노드, 주석노드는 다루지 않기 때문에 웹 페이지의 구성 요소들만 탐색하는 노드들이 있다
✔️ parentElement : 부모 요소 노드
✔️ previousElementSibling/nextElementSibling : 형제 요소 노드
✔️ children : 해당 요소의 자식 요소들
✔️ firstElementChild / lastElementChild : 첫번째, 마지막 자식 요소 노드
요약
- 탐색 프로퍼티를 이용해서 부모, 형제, 자식 노드들로 바로 이동할 수 있다.
- 탐색 프로퍼티는 크게 두 개의 집합으로 나뉜다.
- 모든 노드에 적용 가능한 : parentNode, childNodes, firstchild, lastChild, previousSibling, nextSibling
- 요소 노드에만 적용 가능한 : parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling
Reference
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] getElement, querySelector로 요소 검색하기 (0) | 2022.01.11 |
|---|---|
| [Javascript] 배열 메소드 연습문제 (0) | 2022.01.10 |
| [Javascript] 브라우저 환경과 다양한 명세서 (0) | 2022.01.10 |
| [Javascript] setTimeout / setInterval (0) | 2022.01.07 |
| [Javascript] Object.keys, values, entries (0) | 2022.01.07 |