[TIL; 4d] DOM 요소를 선택할 수 있는 메서드들

최근 바닐라 코드로 작업을 하고 있는데 진짜 너무 옛날에 썼던 거라 기억이 나질 않아 곤란했다.

선언형으로 작업하는 게 이렇게 노가다스러운 일이었구나 🥲 를 새삼 깨닫는다.

 

document.querySelector

- CSS 선택자 기반으로 첫 번째 요소 반환한다. (단일 요소로 없으면 null 반환)

- CSS 선택자 아무거나 선택할 수 있어서 유연하다.

<div class="container">
  <p class="text">Hello!</p>
  <p class="text">World!</p>
</div>
<script>
  const firstText = document.querySelector('.text');
  console.log(firstText.textContent); // "Hello!"
</script>

 

document.querySelectorAll

- CSS 선택자 기반으로 매칭되는 '모든 요소'를 NodeList로 반환한다.

- 이 NodeList는 배열처럼 사용할 수 있어 forEach를 사용해 순회하여 어떤 액션을 할 수 있음

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  const items = document.querySelectorAll('li');
  items.forEach((item, index) => {
    console.log(`Item ${index + 1}: ${item.textContent}`);
  });
  // 출력:
  // Item 1: Item 1
  // Item 2: Item 2
  // Item 3: Item 3
</script>

 

document.getElementById

- html 문서 중 특정 id 속성을 가진 단일 요소를 반환한다. (id는 document 1개당 1개만 가능하다.)

- 그렇기 때문에 가장 빠른 선택 메서드다.

<div id="myDiv">Hello, World!</div>
<script>
  const myDiv = document.getElementById('myDiv');
  console.log(myDiv.textContent); // "Hello, World!"
</script>

 

document.getElementsByClassName

- 주어진 클래스 이름을 가진 '모든 요소'를 HTMLCollection으로 반환한다.

- 이 반환값은 실시간으로 업데이트 되며 클래스 이름이 여러 개 일 때에도 이 클래스가 포함되면 반환한다.

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<script>
  const items = document.getElementsByClassName('item');
  console.log(items.length); // 3
  console.log(items[1].textContent); // "Item 2"
</script>

 

document.getElementsByTagName

- 주어진 태그 이름을 가진 '모든 요소'를 HTMLCollection으로 반환한다.

- 태그 이름을 요소로 선택하며 이 반환값도 실시간으로 업데이트 된다.

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
  const paragraphs = document.getElementsByTagName('p');
  console.log(paragraphs.length); // 3
  console.log(paragraphs[0].textContent); // "Paragraph 1"
</script>

 

위에서 말하는 실시간 업데이트는 DOM 상태와 동기화 된 '실시간 객체'인지를 말한다.

DOM에 해당 태그가 추가되거나 삭제되면 그 즉시 변경된다는 말이다.

 

AI를 사용해서 만든 표

 

이걸 정리하게 된 건 오늘 코드 리뷰에서 내가 document.querySelector로 id를 선택했는데,

그렇게 하는 것보다 document.getElementById를 사용해봐도 좋을 것 같다는 리뷰를 받아서다.

까먹고 있었는데 id만을 선택하는 저 메서드를 사용하면 더 빠르게 선택할 수 있다는 내용들이 많았다.

 

참고: https://bobbohee.github.io/2021-02-12/getelementbyid-versus-queryselector

getElementById와 querySelector, 어느 것을 사용할까? | bobbohee

 

리액트에 속아 바닐라의 소중함을 잊지 말자

라고 하기엔 리액트에 속지도 않았다...