E2 : 요소 검색하기

목차

1. 요소의 검색

2. document.getElementById

3. querySelectorAll, querySelector

5. matches();

6. closest

---

1. 요소의 검색

요소들이 가까이 붙어있지 않다면, 상대 위치로 요소 노드에 접근할 수 없다.

이럴 경우, id를 검색해서 원하는 요소에 접근할 수 있다.

---

2. id로 검색해서 요소 다루기

요소에 id 속성이 있으면 document.getElementById(id)를 사용해 접근할 수 있다.

<div id="element">
  <div id="content">blah blah</div>
</div>

<script>
  let element = document.getElementById('element');	// id로 요소 검색해서 얻음
  
  element.style.background = 'red';	// 요소의 배경색 변경
</script>

 

 

---

3. querySelectorAll, querySelector

1. querySelectorAll

[element].querySelectorAll(css)는 자식 요소 중 주어진 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>

예시 코드는 마지막 <li> 요소를 모두 반환하고 있다.

이 때 사용하는 css로는 가상 클래스도 사용할 수 있다.

→ document.querySelectorAll(':hover') 작성 시, hover 상태인 요소를 모두 담은 컬렉션을 반환

 

2. querySelector

[element].querySelector(css)는 주어진 css 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

 = [element].querySelectorAll(css) [0] 인 셈이다.

 

querySelectorAll은 모든 요소를 검색하나, querySelector는 해당 요소를 찾으면 검색을 멈춘다는 차이가 있다.

 

---

4. matches

[element].matches(css)는 [element]가 주어진 CSS와 일치하는지 여부를 판단한다.(true/false)

요소 배열을 순회하여 원하는 요소만 걸러낼 때 유용하다.

<a href="https://example.com/file.zip">...</a>
<a href="htps://something.com">...</a>

<script>
  // document.body.children이 아니어도 컬레션이라면 이 메서드 적용 가능
  for(let elem of document.body.children) {
    if (elem.matches('(a[href$="zip"]')) {
      alcert("주어진 CSS 선택자와 일치하는 요소: " + elem.href );
    }
  }
</script>

 

 

---

5. closest

부모/조상 요소 등 DOM 트리에서 특정 요소의 상위에 있는 요소들을 조상 요소라고 한다.

[element].closest(css)는 [element] 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾는다.

 

closest 메서드는 해당 요소부터 DOM 트리를 한 단계씩 거슬러 올라가면 원하는 요소를 찾으며,

CSS 선택자와 일치하는 요소를 찾으면 검색을 중단하고 찾아낸 요소를 반환한다.

<h1>lits</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">page 1 </li>
    <li class="chapter">page 2 </li>
  </ul>
</div>

<script>
  let chapter = document.querySelector('.chapter');	// LI
  
  alert(chapter.closest('.book'));	// UL
  alert(chapter.closest('.contents'));	// DIV
  
  alert(chapter.closest('h1'));	// null (h1은 li의 조상이 아님)
</script>

 

---

6. getElementsBy*

아이디가 아닌 태그나 클래스 등을 이용해 원하는 노드를 찾는 메서드이다.

querySelector를 이용하는 게 더 편리하고 문법도 짧아서 요즘은 잘 안쓰인다.

• getElementsByName : name 검색
• getElementsByTagName : 태그나 * 검색
• getElementsByClassName : class로 검색
• ...

오래된 스크립트나 일부 꼭 필요한 상황에서 쓰일 수 있다.

 

 

 

 

참고

https://ko.javascript.info/searching-elements-dom

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