DOM 탐색

DOM 탐색 방법

1. ID로 요소 검색 (document.getElementById)
2. 태그 이름으로 검색 (document.getElementByTagName)
3. CSS 선택자로 요소 검색 (document.querySelector)

<article id="bar">
  <h2>Lorem ipsum</h2>
</article>

<script>
var article = document.querySelector( "#bar" ),
    heading = article.querySelector( "h2" );
</script>

선택자는 하나 이상의 타입(태그) 선택자와 클래스 선택자, ID 선택자, 속성 선택자 또는 의사 클래스 선택자로 매우 다양한 조합이 가능하기 때문에 자바스크립트에서 HTML 요소를 바인딩하는 것은 쉽지 않다. 따라서 data-* 속성 선택자를 사용할 것을 추천한다.

<article data-bind="bar">
  <h2 data-bind="heading">Lorem ipsum</h2>
</article>

<script>
var article = document.querySelector( "[data-bind=\"bar\"]" ),
    heading = article.querySelector( "[data-bind=\"heading\"]" );
</script>

이 방법은 HTML 구조에서 자유로우며 CSS 클래스 독립적이기 때문에 안전하게 CSS를 리팩토링할 수 있다. 또한 문서마다 고유한 값을 가지는 ID에 한정되지도 않는다. querySelector가 DOM에서 선택자와 일치하는 첫번째 요소를 가져오는 반면, querySelectAll는 모든 요소를 검색한다.

<ul data-bind="bar">
  <li data-bind="item">Lorem ipsum</li>
  <li data-bind="item">Lorem ipsum</li>
  <li data-bind="item">Lorem ipsum</li>
</ul>
<script>
var ul = document.querySelector( "[data-bind=\"bar\"]" ),
      lis = ul.querySelectorAll( "[data-bind=\"item\"]" );
console.log( lis.length );
</script>

검색된 요소는 NodeList로 표시되며 배열은 아니다. DOM이 리플로될 때마다 업데이트되는 라이브 콜렉션이다.
라이브 콜렉션에서의 반복은 느리며 상당히 비싼 자원을 소비한다.
따라서 콜렉션이 라이브일 필요가 없을 때는 콜렉션을 [].slice.call(nodelist)과 같은 배열로 변환한다.
ES6에서 이는 [...nodeList] spread 연산자를 사용해 수행할 수 있다.

var ul = document.querySelector( "[data-bind=\"bar\"]" ),
      lis = ul.querySelectorAll( "[data-bind=\"item\"]" );
console.log( [].slice.call( lis ) ); // into array ES5 way
console.log( [ ...lis ] ); // into array ES6 way

발견된 요소가 지정된 선택자와 일치하는지의 여부도 테스트할 수 있다.

console.log(el.matches(".foo > .bar"));
console.log(input.matches(":checked"));