DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 합니다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 **'노드(node)'**라고 합니다.
아래 코드를 통해 트리를 탐험해 봅시다.
document.head
document.body
document.body.childNodes
document.body.childNodes[1]
document.body.childNodes[1].tagName
document.body.childNodes[1].innerText
document.body.childNodes[1]. //점만 찍어서 얼마나 많은 애트리뷰트가 있는지 확인해보세요.
document.body.childNodes[2]
document.body.childNodes[2].data
<aside> 🧐 API는 Application Programming Interface 입니다. 쉽게 ‘주문서’라고 기억해주시면 됩니다.
</aside>
document 객체를 통해 HTML 문서에 접근이 가능합니다. document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 수행합니다.
// 해당하는 Id를 가진 요소에 접근하기
document.getElementById();
// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();
// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();
// css 선택자로 단일 요소에 접근하기
document.querySelector("selector");
// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");
<aside> 🤔 HTMLCollection과 NodeList
getElementsBy… 메소드와 querySelectorAll 메소드는 모두 조건에 일치하는 모든 요소를 찾는다는 공통적인 기능을 수행합니다. 하지만 그 결과물을 콘솔창에서 확인하면 조금 다르다는것을 알게 됩니다.
<article id="container">
<ul>
<li>탕수육</li>
<li class="item-second">유산슬</li>
<li>짜장면</li>
</ul>
</article>
<script>
const cont = document.getElementById('container');
const item1 = cont.getElementsByTagName('li');
const item3 = cont.querySelectorAll('li');
</script>
위와 같은 코드를 작성하였을 때 item1과 item3을 콘솔에 찍어보면 결과는 아래와 같습니다.
HTMLCollection과 NodeList 는 모두 배열과 비슷한 객체(array-like object) 형태를 가집니다. 때문에 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근한다는 공통점이 있지만,
가장 큰 차이점은 해당 객체에 포함될 수 있는 DOM 요소의 유형입니다. HTMLCollection은 HTML만 포함하지만, NodeList는 모든 유형의 DOM 요소 즉, text, 주석 등을 모두 포함합니다.
또 다른 차이점은 객체를 구성하는 값이 변경 가능한지 여부입니다. HTMLCollection은 실시간으로 업데이트되며, 해당 객체의 각 속성에 대한 변경 사항이 즉시 반영됩니다. 반면에, NodeList는 정적이므로 해당 객체에 대한 변경 사항은 즉시 반영되지 않습니다.
마지막으로 사용할 수 있는 메소드가 다릅니다. NodeList는 forEach 같은 배열 메소드를 사용할 수 있지만 HTMLCollection은 또 다른 기능을 지원합니다.
</aside>