요소들이 가까이 붙어 있다면 DOM 탐색 프로퍼티를 사용하여 목표 요소에 쉽게 접근할 수 있지만, 그렇지 않은 경우도 있다. 상대 위치를 이용하지 않으면서 웹페이지 내에서 원하는 요소 노드에 접근하는 방법을 알아본다.

document.getElementById

요소에 id 속성이 있으면 위치에 상관없이 getElementById를 사용하여 접근할 수 있다.

<aside> 💡

id 는 중복되면 안 된다.

html 내 요소의 id 속성값은 중복되어선 안 됨!

같은 id를 가진 요소가 여러 개 있으면 id를 이용해 요소를 검색하는 메서드의 동작이 예측 불가능해진다.

</aside>

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 요소 얻기
  let elem = document.getElementById('elem');

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

querySelectorAll, querySelector

이 메서드들은 CSS 선택자를 활용할 수 있다는 점에서 아주 유용하다. All이 붙여진 메서드는 주어진 CSS 선택자에 대응하는 요소 모두를 반환하고, 다른 하나는 주어진 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "1-2", "2-2"
  }
</script>