JS 40-2 getElement, querySelector로 요소 검색하기 2

matches

  elem.matches(css)이 메서드는 요소 elem이 주어진 css 선택지와 일치하는지 여부를 판단 하여 true 또는 false를 반환한다.

  요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용하다.

예시

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

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

 

---

closest

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

  메소드 elem.closest(css)는 elem 자기 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소를 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 원하는 요소를 찾는다. 요소를 찾으면, 검색을 멈추고 반환한다.

<h1>목차</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">1장</li>
    <li class="chapter">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>

 

---

getElementsBy

  태그나 클래스 등을 이용해 원하는 노드를 찾는 메거드가 있다.

  요즘은 querySelector를 이용하는 게 더 편리하고 문법도 짧아서, 요즘은 이런 메서드들을 잘 쓰진 않지만 이미 구선된 코드에 종종 나올 것이므로 알아야 하는 부분이다!!

• elem.getElementsByTagName(tag) – 주어진 태그에 해당하는 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환한다. 매개변수 tag에 "*"이 들어가면, '모든 태그’가 검색된다.
• elem.getElementsByClassName(className) – class 속성값을 기준으로 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환한다.
• document.getElementsByName(name) – 아주 드물게 쓰이는 메서드로, 문서 전체를 대상으로 검색을 수행한다. 검색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션을 반환한다.

 

예)

// 문서 내 모든 div를 얻습니다.
let divs = document.getElementsByTagName('div');

 

---

살아있는 컬렉션

  'getElementsBy'로 시작하는 모든 메서드는 살아있는 컬렉션을 반환한다. 문서에 변경이 있을 때마다 컬렉션이 '자동 갱신’되어 최신 상태를 유지한다.

  반면, querySelectorAll은 정적인 컬렉션을 반환한다. 컬렉션이 한 번 확정되면 더는 늘어나지 않는다.

 

getElementsBy의 예

<div>첫 번째 div</div>

<script>
  let divs = document.getElementsByTagName('div');
  alert(divs.length); // 1
</script>

<div>두 번째 div</div>

<script>
  alert(divs.length); // 2
</script>

 

querySelectorAll의 예

<div>첫 번째 div</div>

<script>
  let divs = document.querySelectorAll('div');
  alert(divs.length); // 1
</script>

<div>두 번째 div</div>

<script>
  alert(divs.length); // 1
</script>

 

---

공부한 곳!! 모던 JavaScript 튜토리얼

바로가기!!