DOM이란?(MDN)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

나의 해석
페이지 내에서의 interaction을 위해 HTML,CSS,JS의 연결하기 위한 역할
이 때, HTML을 계층화 시키면 트리구조를 갖게되고 이를 표현하기에 object 형태가 적절하여 object의 형태로 표현된다.

그렇다면 이 DOM 객체를 가져오는 방법을 알아보자.

1.getElementById

ID 값을 통하여 자바스립트 객체를 가지고 올 수 있습니다.

<ul>
   <li id = "red">Red</li>
</ul>

👇

const red = document.getElementById("red");

id값은 고유하기 때문에 원하는 HTML값을 하나만 가져오고 싶을 때 용이합니다.

2. getElementsByClassName

class 값을 통하여 자바스립트 객체를 가지고 올 수 있습니다.

<ul>
    <li id = "red">Red</li>
    <li class = "yellow">yellow</li>
    <li class = "yellow">yellow</li>
    <li class = "yellow">yellow</li>
</ul>

👇

const yellow = document.getElementsByClassName("yellow")[0];

getElementsByClassName함수로 yellow라는 class 이름이 있는 요소를 찾습니다.
[0]를 붙인 이유는 getElementsByClassName사용시 같은 class값을 가진 태그들이 HTML collection[]이라는 유사 배열로 반환되는데 이 때, 배열의 순서 중 원하는 인덱스 번호로 불러와서 사용할 수 있다.

3.querySelector

제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다.

document.querySelector(selectors);

selectors자리에 id명 class명 tag이 들어갈 수 있다.

4.querySelectorAll

지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 (NodeList) 반환합니다. 즉, 문서 내에 있는 조건에 맞는 모든 객체를 가져옵니다.

elementList = parentNode.querySelectorAll(selectors);

selectors자리에 id명 class명 tag이 들어갈 수 있다.

여기서 궁금증! 🤔
여러 값을 가지고 오는 getElementsByClassName와 querySelectorAll을 더 자세히 알아보자.

두 메소드는 각 각 HTMLCollection과 NodeList를 반환하는데 어떤 차이일까? 비교해 보도록 하자.

우선 둘 다 length 속성이 있고 숫자 인덱싱을 할 수 있다.

HTMLCollection는 forEach를 사용할 수 없다.
NodeList는 forEach가 사용 가능하다

짧게나마 DOM과 가져올 수 있는 메소드를 알아보았다.
헷갈릴 수 있는 부분이 있으니 잘 숙지하도록 하자!👍