DOM 탐색하기
: DOM에 수행하는 모든 연산은 document 객체에서 시작
: document 객체는 DOM에 접근하기 위한 진입점으로 이를 통과하면 어떤 노드에도 접근할 수 있음
: DOM 노드 탐색의 관계도
트리 상단의 documentElement와 body
: DOM 트리 상단의 노드들은 document 객체가 제공하는 프로퍼티를 사용해 접근할 수 있음
: document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 <html> 태그에 해당하는
document.documentElement임
: <body> 태그에 해당하는 DOM 노드는 document.body이며 자주 쓰임
: <head> 태그는 document.head
※ document.body가 null일 수 있음
: 스크립트를 읽는 도중 존재하지 않는 요소는 스크립트에서 접근할 수 없음
: 브라우저가 아직 document.body를 읽지 않은 경우 <head> 내의 스크립트에서는 document.body에 접근할 수 없음
※ DOM에서 null은 존재하지 않음을 의미
자식 노드 탐색하기
- 자식 노드 (child node, children)
: 바로 아래의 자식 요소
: 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 생성
: <head>와 <body>는 <html> 요소의 자식 노드임
- 후손노드 (descendants)
: 중첩 관계에 있는 모든 요소를 의미
: 자식노드, 자식 노드의 모든 자식 노드 등
- chindNodes 컬렉션
: 텍스트 노드를 포함한 모든 자식 노드를 가짐
<html>
<body>
<div>시작</div>
<ul>
<li>항목</li>
</ul>
<div>끝</div>
<script>
for (let i = 0; i < document.body.childNodes.length; i++) {
alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ... , SCRIPT
}
</script>
...추가 내용...
</body>
</html>: 예시를 실행하면 <script> 아래 추가 내용은 스크립트 실행 시점에
브라우저가 추가 내용을 읽지 못한 상태이기 때문에 나오지 않음
- firstChild / lastChild
: 첫 번째 및 마지막 자식 노드에 접근
elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
DOM 컬렉션
: childNodes는 배열이 아닌 이터러블 유사 배열 객체인 컬렉션임
: for of와 배열 메서드를 사용할 수 있음
: Array.from을 사용하여 진짜 배열을 만들 수 있음
for (let node of document.body.childNodes) {
alert(node); // 컬렉션 내의 모든 노드를 보여줍니다.
}alert(document.body.childNodes.filter); // undefined (filter 메서드가 없습니다.)alert( Array.from(document.body.childNodes).filter ); // function
※ DOM 컬렉션은 읽기만 가능
: 자식노드의 교체가 불가능
: DOM을 변경하기 위해서는 다른 메서드를 사용해야함
※ DOM 컬렉션은 살아있다
: 몇몇 예외사항을 제외하고 거의 모든 DOM은 현재 상태를 반영
※ 컬렉션에는 for in 반복문을 사용하지 말 것
: for in 반복문은 객체의 모든 열거 가능한 프로퍼티를 순회하기 때문에 for of를 사용하라
형제노드와 부모노드
- 형제노드 (sibling)
: 같은 부모를 가진 노드
<html>
<head>...</head><body>...</body>
</html>: 위에서 <body>는 <head> 다음 혹은 우측에 있는 형제 노드
: <head>는 <body>의 이전 혹은 좌측에 있는 형제 노드
- nextSibling / previousSibling
: 다음 형제 노드 / 이전 형제 노드를 찾음
- parantNode
: 부모노드에 대한 정보
// <body>의 부모 노드는 <html>입니다
alert( document.body.parentNode === document.documentElement ); // true
// <head>의 다음 형제 노드는 <body>입니다.
alert( document.head.nextSibling ); // HTMLBodyElement
// <body>의 이전 형제 노드는 <head>입니다.
alert( document.body.previousSibling ); // HTMLHeadElement
요소간 이동
- childNodes
: 텍스트 노드, 요소 노드, 주석 노드까지 참조
- 실제 상황을 토대로한 DOM 요소 노드 탐색
- children 프로퍼티
: 해당 요소의 자식 노드 중 요소 노드만을 가리킴
- firstElementChild / lastElementChild 프로퍼티
: 첫 번째 자식 요소 노드와 마지막 자식 요소 노드를 가리킴
- previousElementsSibling / nextElementChild 프로퍼티
: 형제 요소 노드를 가리킴
- parentElement 프로퍼티
: 부모 요소 노드를 가리킴
- parentNode 프로퍼티
: 종류에 상관 없이 부모노드를 반환
: 노드 요소가 아닌 것도 가리키기 때문에 parentElement와 반환 값이 다를 수 있음
<html>
<body>
<div>시작</div>
<ul>
<li>항목</li>
</ul>
<div>끝</div>
<script>
for (let elem of document.body.children) {
alert(elem); // DIV, UL, DIV, SCRIPT
}
</script>
...
</body>
</html>
테이블 탐색
: 일부 DOM 요소 노드는 편의를 위해 기본 프로퍼티 외에 추가적인 프로퍼티를 지원함
- <table> 요소
: table.rows = <tr> 요소를 담은 컬렉션을 참조
: table.cation/tHead/tFoot = 각각 <caption>, <thead>, <tfoot>을 참조
: table.tBodies = <tbody> 요소를 담은 컬렉션을 참조
※ <tbody> 요소는 최소한 하나는 존재해야 하기 때문에 브라우저는 이를 DOM에 자동으로 추가함
※ <thead>, <tfoot>, <tbody> 요소는 rows 프로퍼티를 지원
※ tbody.rows는 tbody내 <tr>요소 컬렉션을 참조
- <tr> 요소
: tr.cells = 주어진 <tr>안의 모든 <td>, <th>를 담은 컬렉션을 반환
: tr.sectionRowIndex = 주어는 <tr>이 <thead>/<tbody>/<tfoot> 안쪽에서 몇 번째 중에 위치하는지
나타내는 인덱스 반환
: tr.rowIndex = <table> 내에서 해당 <tr> 몇 번째 줄인지 반환
- <td> / <th> 요소
: td.cellIndex = <td>나 <th>가 속한 <tr>에서 해당 셀이 몇번 째인지 반환
<table id="table">
<tr>
<td>일</td><td>이</td>
</tr>
<tr>
<td>삼</td><td>사</td>
</tr>
</table>
<script>
// '이'가 적힌 td를 가져옴(첫 번째 줄, 두 번째 칸)
let td = table.rows[0].cells[1];
td.style.backgroundColor = "red"; // 강조
</script>
Refference
DOM 탐색하기
ko.javascript.info
'Programming > JavaScript' 카테고리의 다른 글
| 모던 자바스크립트 (문서) 18-6. 속성과 프로퍼티 (0) | 2022.04.24 |
|---|---|
| 모던 자바스크립트 (문서) 18-5. 주요 노드 프로퍼티 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-2. DOM 트리 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-1. 브라우저 환경과 다양한 명세서 (0) | 2022.04.24 |
| 모던 자바스크립트 17. Proxy와 Reflect (0) | 2022.04.23 |