DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있다. 하지만 무엇가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 한다.
DOM에 수행하는 모든 연산은 document 객체로 시작하면 된다.
documentElement와 body, head
- <html> = document.documentElement
- document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 <html> 태그에 해당하는 document.documentElement입니다.
- <body> = document.body
- document.body는 <body> 요소에 해당하는 DOM 노드로, 자주 쓰이는 노드 중 하나입니다.
- <head> = document.head
- <head> 태그는 document.head로 접근할 수 있습니다.
※ DOM의 null은 '존재하지 않음' 또는 '해당하는 노드가 없음'을 의미함.
childNodes, firstChild, lastChild로 자식 노트 탐색
- 자식 노드(child node, children) 는 바로 아래의 자식 요소를 나타낸다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만듭니다. <head>와 <body>는 <html>요소의 자식 노드입니다.
- 후손 노드(descendants) 는 중첩 관계에 있는 모든 요소를 의미합니다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.
아래의 예시를 보면 <body>의 자식으로 <div>, <ul>, <script> 이며 후손으로 <li>가 있다.
childNodes 컬렉션은 텍스트 노드를 포함한 모든 자식 노드를 담고 있습니다.
<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>
그리고 firstChild와 lastChild프로퍼티를 이용하면 첫 번째, 마지막 자식 노드에 빠르게 접근할 수 있어 자식 노드가 존재하는지 확인할 수 있다.
elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
DOM 컬렉션
위에서 살펴본 childNodes는 마치 배열 같아 보인다. 하지만 childNodes는 배열이 아닌 반복 가능한(iterable, 이터러블) 유사 배열 객체인 컬렉션(collection) 이다.
childNodes는 컬렉션이기 때문에 아래와 같은 특징을 가지고 있다.
- for..of 를 사용할 수 있다. (이터러블이기 때문에 Symbol.iterator 프로퍼티가 구현되어 있어서 for..of를 사용하는 것이 가능하죠.)
- 배열이 아니기 때문에 배열 메서드를 쓸 수 없다. (Array.from을 사용하면 ‘진짜’ 배열로 만들면 배열 메서드를 사용할 수 있다.)
※ DOM 걸렉션은 읽는 것만 가능하다. for..in문을 사용하면 불필요한 부분까지 반환하기 때문에 사용을 자제하는 것이 좋다.
'JS' 카테고리의 다른 글
| JS 40-1 getElement, querySelector로 요소 검색하기 1 (0) | 2023.01.10 |
|---|---|
| JS 39-2 DOM 탐색하기 2 (0) | 2023.01.09 |
| JS 38-2 DOM 트리 2 (0) | 2023.01.04 |
| JS 38-1 DOM 트리 1 (0) | 2023.01.03 |
| JS 27 브라우저 환경과 다양한 명세서 (0) | 2022.12.29 |