✍️ DOM 접근의 기본에 대해 정리해 보았다. 항상 쓰던 것만 썼어서, 정리하면서 처음 보는 것도 있었다. (살짝 반성한다.🙇) 기초를 차근차근 다진다는 마음으로 정리해 보았다.
1. DOM 탐색 프로퍼티
document
document.documentElement=<html>document.body=<body>document.body=<body>document.head=<head>
노드 이동
- 좌 : 해당 특성의 모든 노드를 탐색 하고자 할 때, (텍스트 노드, 요소 노드, 주석 노드 포함)
- 우: 해당 특성의 요소 노드만 탐색 하고자 할 때
| 특성 | 모든 노드 참조 | 요소 노드만 참조 |
|---|---|---|
| 자식 노드 | childNodes | children |
| 첫 번째 자식 노드 | firstChild | firstElementChild |
| 마지막 번째 자식 노드 | lastChild | lastElementChild |
| 다음 형제 노드 | nextSibling | nextElementSibling |
| 이전 형제 노드 | previousSibling | previosElementSibling |
| 부모 노드 | parentNode | parentElement |
- childNodes - children
-
읽기 전용
-
iterator 이므로
for…of문 사용 가능 -
유사 배열이므로 array 메서드는 사용 못함. but,
Array.from을 사용하면 가능elem.childNodes[i]
-
- hasChildNodes
-
자식 노드가 있는지 확인 - true/false 반환
elem.hasChildNodes
-
table
table
table.rows=<tr>table.caption=<caption>table.tHead=<thead>table.tFoot=<tfoot>table.tBodies=<tbody>
tr
tr.cells: tr 안의 모든 td, th 반환tr.sectionRowIndex: tr이 thead, tbody, tfoot 안쪽에서 몇 번째 줄에 위치하는지 인덱스 반환tr.rowIndex: table내에서 tr이 몇 번째 줄인지 인덱스 반환
th, td
th.cellIndex: th가 속한 tr에서 몇 번째 셀에 속하는지 인덱스 반환td.cellIndex: td가 속한 tr에서 몇 번째 셀에 속하는지 인덱스 반환
2. DOM 탐색 메서드
document.getElementById
document.getElementById(id)
- id에 대응 하는 요소를 반환
- id 속성을 타겟으로 접근.
<div id="box">
<div id="box-content">Element</div>
</div>let box = document.getElementById('box');
box.style.background='yellow';- id 속성 값을 그대로(=전역변수) 타겟으로 하여 접근 가능.
- id 명에 하이픈(’-’)이 있으면
window[’id명’]으로 접근.
- id 명에 하이픈(’-’)이 있으면
box.style.background='yellow';
window['box-content'].style.background='green';querySelectorAll
elem.querySelectorAll(css)
- elem의 자식 요소 중 css 선택자에 대응 하는 모든 요소들을 뱐환.
- css 선택자를 사용하여 타킷 설정.
:hover,:active같은 가상 클래스도 사용 가능.
<ul>
<li>한놈</li>
<li>두시기</li>
<li>석삼</li>
<li>너구리</li>
</ul>let elements = document.querySelectorAll('ul > li');
for (let elem of elements) {
alert(elem.innerHTML); // "한놈", "두시기", "석삼", "너구리"
}querySelector
elem.querySelector(css)
- elem의 자식 요소 중 css 선택자에 대응 하는 첫번째 요소를 뱐환.
- css 선택자를 사용하여 타킷 설정.
let element = document.querySelector('ul > li');
alert(element.innerHTML); //'한놈'closest
elem.closest(css)
- elem 자기 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소를 반환.
<div class="contents">
<ul class="book">
<li class="chapter">1장</li>
<li class="chapter">2장</li>
</ul>
</div>let chapter = document.querySelector('.chapter'); // LI
alert(chapter.closest('.book')); // UL
alert(chapter.closest('.contents')); // DIVetc
matches
elem.matches(css)
- elem이 css 선택자와 일치하는지 여부 반환 (true / false)
- 요소가 담겨있는 배열 등을 순회하여 원하는 요소만 걸러내고자 할 때 사용.
<ul id="birds">
<li>Orange-winged parrot</li>
<li class="endangered">Philippine eagle</li>
<li>Great white pelican</li>
</ul>const birds = document.querySelectorAll('li');
for (const bird of birds) {
if (bird.matches('.endangered')) {
console.log(`The ${bird.textContent} is endangered!`);
// The Philippine eagle is endangered!
}
}contains
elemA.contains(elemB)
- elemB가 elemA와 같거나, 속할는지 여부를 반환. (true / false)
- 부모 자식 관계 여부를 확인 할 때 사용.
<div id="myDIV">
<p>I am a p element inside "myDIV", and I have a <span id="mySPAN"><b>span</b></span> element inside of me.</p>
</div>const span = document.getElementById("mySPAN");
let answer = document.getElementById("myDIV").contains(span);
console.log(answer); // true참고 문헌
한 걸음 한 걸음 계속 걷는 자가 일류다