1.4 getElement*, querySelector*로 요소 검색하기

모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록

 

브라우저 환경과 다양한 명세서

브라우저 환경과 다양한 명세서

 

 

웹 페이지 내에서 요소들이 가까이 붙어있지 않은 경우 원하는 요소 노드에 접근하는 방법

document.getElementById 혹은 id를 사용해 요소 검색

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

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

 

id 값에 하이픈(-)이 있는 경우

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

<script>
  // 변수 elem은 id가 'elem'인 요소를 참조
  elem.style.background = 'red';

  // id가 elem-content인 요소는 중간에 하이픈(-)이 있기 때문에 변수 이름으로 쓸 수 없다.
  // 이럴 땐 대괄호(`[...]`)를 사용해서 window['elem-content']로 접근
</script>

 

 

id를 따서 만들어진 전역변수를 요소 접근 시 사용하지 말아라.

id 에 대응하는 전역변수는 명세서의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작이다.

브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 함께 사용할 수 있도록 한다.

하지만 이름이 충돌할 가능성이 있다.

- 실무에선 document.getElementById 를 사용 권장

(이게 되는지도 방금 알았다.)

 

id는 중복되면 안된다.

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

 

anyNode.getElementById 가 아닌 document.getElementById

getElementById는 document 객체를 대상으로 탐색한다.

document 노드가 아닌 다른 노드엔 호출할 수 없다.

---

querySelectorAll

elem.querySelectorAll(css)

elem의 자식 요소 중 주어진 CSS 선택자에 대응하는 요소를 모두 반환

• 마지막 <li> 요소를 모두 반환하는 예제

<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>

 

 

가상 클래스 사용 가능

:hover :active 같은 CSS 선택자의 가상 클래스도 사용할 수 있다.

---

querySelector

elem.querySelector(css)

• 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환
• querySelector 는 해당하는 요소를 찾으면 검색을 멈춘다.
• 속도: querySelectorAll < querySelector

---

matches

elem.matches(css)

요소 elem 이 주어진 CSS 선택자와 일치하는지 여부 판단

• CSS 선택자와 일치하면 true, 아니라면 false를 반환

---

closest

DOM 트리에서 특정 요소의 상위에 있는 요소들은 조상(ancestor) 요소라고 한다.

elem.closest(css)

• elem 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있다.
• 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 CSS 선택자와 일치하는 요소를 찾으면, 검색을 중단하고 해당 요소를 반환

---

contains

elemA.contains(elemB)

• elemB 가 elemA 에 속하거나 (elemB 가 elemA의 후손인 경우)
• elemA == elemB

일 때 true 반환

---

getElementsBy*

태그나 클래스 등을 이용해 원하는 노드를 찾아주는 메서드

elem.getElementsByTagName(tag)

• 주어진 태그에 해당하는 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환.
• 매개변수 tag에 "*"이 들어가면, '모든 태그’가 검색된다.

elem.getElementsByClassName(className)

• class 속성값을 기준으로 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환.

document.getElementsByName(name)

• 아주 드물게 쓰이는 메서드로, 문서 전체를 대상으로 검색을 수행
• 검색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션을 반환.

요소 하나가 아닌, 컬렉션을 반환한다.

---

살아있는 컬렉션

getElementsBy* 의 모든 메서드는 살아있는 컬렉션을 반환한다.

• 문서에 변경이 있을 때마다 컬렉션이 자동 갱신되어 최신 상태를 유지

---

요약

DOM에서 원하는 노드를 검색하는 주요 메서드 6가지