형제와 부모 노드
- 같은 부모를 가진 노드는 현제 노드라고 한다. 대표적으로 <head>와 <body>가 있다.
- nextSibling - 다음 형제 노드 정보를 알 수 있다.
- previousSibling - 이전 형제 노드 정보를 찾는다.
- parentNode - 부모 노드 정보를 알 수 있다.
요소 간 이동
- childNodes를 이용하면 텍스트 노드, 요소 노드, 심지어 주석 노드까지 참조할 수 있다. 하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않는다. 웹 페이지를 구성하는 태그의 문신인 요소 노드를 조작하는 작업이 대다수다.
- 챕터 앞쪽에서 다뤘던 관계와 유사해 보인다. Element라는 단어가 추가된 점이 다르다.
- children - 프로퍼티는 해당 요소의 자식 노드 중 요소 노드만을 가리킴.
- firstElementChild와 lastElementChild - 프로퍼티는 각각 첫 번째 자식 요소 노드와 마지막 자식 요소 노드를 가리킴.
- previousElementSibling과 nextElementSibling - 형제 요소 노드를 가리킴.
- parentElement - 부모 요소 노드를 가리킴.
테이블 탐색하기
<table> 요소는 기본 프로퍼티 이외에 다음과 같은 프로퍼티를 지원한다.
- table.rows는 <tr>요소를 담은 컬렉션을 참조한다.
- table.caption/tHead/tFoot은 각각 <caption>, <thead>, <tfoot> 요소를 참조한다.
- table.tBodies는 <tbody> 요소를 담은 컬렉션을 참조합니다. 표준에 따르면, 테이블 내에 여러 개의 <tbody>가 존재하는 게 가능한데, 최소한 하나는 무조건 있어야 합니다. HTML 문서에는 <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>에서 해당 셀이 몇 번째인지를 나타내는 숫자를 반환한다.
'JS' 카테고리의 다른 글
| JS 40-2 getElement, querySelector로 요소 검색하기 2 (0) | 2023.01.12 |
|---|---|
| JS 40-1 getElement, querySelector로 요소 검색하기 1 (0) | 2023.01.10 |
| JS 39-1 DOM 탐색하기 1 (0) | 2023.01.06 |
| JS 38-2 DOM 트리 2 (0) | 2023.01.04 |
| JS 38-1 DOM 트리 1 (0) | 2023.01.03 |