JavaScript] Searching: getElement*, querySelector*

DOM navigation properties는 elements가 서로 가까이 있을때 유용하다. 하지만 페이지에서 임의의 element에 접근을 해야할때는 어떻게 할 수 있을까?

 

이런 경우를 위한, 추가 searching methods가 있다. 

document.getElementById

만약에 element가 id attribute를 갖고 있다면, 우리는 document.getElementById(id) 함수를 이용해서 원하는 element를 찾을 수 있다. id는 unique해야한다. 

getElementById함수는 document object에서만 호출할 수 있다. 

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

<script>
  // get the element
  let elem = document.getElementById('elem');

  // make its background red
  elem.style.background = 'red';
</script>

querySelectorAll

가장 다용도로 사용되는 함수는 elem.querySelectorAll(css)이다. elem내부에 CSS selector와 매칭되는 모든 elements를 반환한다. 

<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
</script>

querySelector

elem.querySelector(css)는 CSS selector에 맞는 첫번째 element를 반환한다. elem.querySelectorAll(css)[0]과 동일한 element를 반환하지만, 더 빠르고 쓰기 쉽다. 

matches

elem.matches(css)는 DOM을 찾지 않고, elem, CSS selector와 match여부만 확인하여, true or false만 반환한다. 

elements for문 돌때, 관심있는 elements를 필터링 할때 유용하다. 

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

<script>
  // can be any collection instead of document.body.children
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
    }
  }
</script>

closest

element의 ancestor는 element부터 top까지 부모의 부모로 연결되어 있다. 

elem.closest(css)는 CSS selector와 일치한 가장 가까운 ancestor를 반환한다. 

<h1>Contents</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">Chapter 1</li>
    <li class="chapter">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 (because h1 is not an ancestor)
</script>

getElementsBy*

tag, class 등으로 nodes를 찾을 수 있는 함수들이 있다. 

• elem.getElementsByTagName(tag)
• elem.getElementsByClassName(className)
• document.getElementsByName(name)

오늘날, 이 함수들은 잘 사용하지 않으며 querySelector가 쓰기 쉽고 more powerful하다. 

Live collections

getElementsBy* 함수들은 모두 live collection을 반환한다. 현재 document 상황을 반영한다. document가 변경되면 자동 업데이트된다. 

<div>First div</div>

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

<div>Second div</div>

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

반대로 querySelectorAll은 static collection을 반환한다. 

<div>First div</div>

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

<div>Second div</div>

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

Summary

DOM에서 node를 찾는 주요 6가지 함수가 있다. 

Method	Searches by...	Can call on an element?	Live?
querySelector	CSS-selector	✔	-
querySelectorAll	CSS-selector	✔	-
getElementById	id	-	-
getElementsByName	name	-	✔
getElementsByTagName	tag or '*'	✔	✔
getElementsByClassName	class	✔	✔

querySelector, querySelectorAll을 주로 사용하지만, getElement(s)By*도 산발적으로 오래된 scripts에서 찾을 수 있다. 

그 외에 

• elem.matches(css)
• elem.closest(css)
• elemA.contains(elemB)