DOM
요소 검색

ID로

document.getElementById('uniqueID')

검색 할 것이다

<div id="uniqueID"></div>

지정된 ID를 가진 요소가 존재하는 한 document.getElementById 는 해당 요소 만 리턴합니다. 그렇지 않은 경우, null 를 돌려 null .

참고 : ID는 고유해야합니다. 여러 요소는 동일한 ID를 가질 수 없습니다.

클래스 이름으로

document.getElementsByClassName('class-name')

검색 할 것이다

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

지정된 클래스가 포함 된 기존 요소가 없으면 빈 콜렉션이 리턴됩니다.

예:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

태그 이름 별

document.getElementsByTagName('b')

검색 할 것이다

<b>All</b>
<b>of</b>
<b>the b elements.</b>

지정된 태그 이름을 가진 요소가 없으면 빈 콜렉션이 리턴됩니다.

CSS 선택기로

다음 HTML 코드 고려

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

다음 DOM 트리를 기반으로 DOM 트리가 생성됩니다.

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

CSS 선택자를 사용하여 DOM 트리에서 요소를 선택할 수 있습니다. 이것은 querySelector() 및 querySelectorAll() 의 두 가지 JavaScript 메소드를 사용하여 가능합니다.

querySelector () 메소드는 주어진 CSS 선택기와 일치하는 첫 번째 요소를 DOM에서 리턴합니다.

document.querySelector('li.main')

클래스가 main 첫 번째 li 요소를 반환합니다.

document.querySelector('#two')

id가 two 요소를 반환합니다.

참고 : 요소가 없으면 null 이 반환됩니다. 선택자 문자열에 CSS 의사 요소가 포함되어 있으면 반환 값은 null 됩니다.

querySelectorAll () 메소드는 DOM에서 제공된 css 선택기와 일치하는 모든 요소를 ​​리턴합니다.

document.querySelectorAll('li.main')

클래스가 main 모든 li 요소를 포함하는 노드 목록을 반환합니다.

참고 : 요소가 발견되지 않으면 빈 노드 목록이 반환됩니다. 선택기 문자열에 CSS 의사 요소가 포함되어 있으면 반환되는 elementList는 비어 있습니다.

쿼리 선택기

최신 브라우저 [1] 에서는 sizzle.js (jQuery에서 사용)와 같은 방식으로 CSS와 같은 선택기를 사용하여 문서의 요소를 쿼리 할 수 ​​있습니다.

querySelector

쿼리와 일치하는 문서의 첫 번째 Element 를 반환합니다. 일치하는 것이 없으면 null 리턴합니다.

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

조회와 일치하는. 서의 모든 요소를 ​​포함하는 NodeList 를 리턴합니다. 일치하지 않으면 빈 NodeList 반환합니다.

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');