DOM
Odzyskiwanie elementów

Według ID

document.getElementById('uniqueID')

odzyska

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

Dopóki istnieje element o podanym identyfikatorze, document.getElementById zwróci tylko ten element. W przeciwnym razie zwróci null .

Uwaga: identyfikatory muszą być unikalne. Wiele elementów nie może mieć tego samego identyfikatora.

Według nazwy klasy

document.getElementsByClassName('class-name')

odzyska

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

Jeśli żadne istniejące elementy nie zawierają danej klasy, zostanie zwrócona pusta kolekcja.

Przykład:

<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

Według nazwy znacznika

document.getElementsByTagName('b')

odzyska

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

Jeśli nie istnieją elementy o podanej nazwie znacznika, zostanie zwrócona pusta kolekcja.

Przez Selektor CSS

Rozważ zastosowanie kodu 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>

Następujące drzewo dom zostanie zbudowane na podstawie powyższego kodu HTML

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

Możemy wybierać elementy z drzewa DOM za pomocą selektorów CSS. Jest to możliwe za pomocą dwóch metod javascript, a mianowicie querySelector() i querySelectorAll() .

Metoda querySelector () zwraca pierwszy element pasujący do podanego selektora css z DOM.

document.querySelector('li.main')

zwraca pierwszy element li , którego klasa jest main

document.querySelector('#two')

zwraca element o id two

UWAGA: Jeśli nie zostanie znaleziony żaden element, zwracana jest null . Jeśli ciąg selektora zawiera pseudoelement CSS, wartość zwracana będzie null .

Metoda querySelectorAll () zwraca wszystkie elementy pasujące do podanego selektora css z DOM.

document.querySelectorAll('li.main')

zwraca listę węzłów zawierającą wszystkie elementy li , których klasa jest main .

UWAGA : Jeśli nie zostanie znaleziony żaden element, zwracana jest pusta lista węzłów. Jeśli ciąg selektorów zawiera pseudoelement CSS, zwrócony elementLista będzie pusty

Selektory zapytań

W nowoczesnych przeglądarkach [1] można używać selektora podobnego do CSS, aby wyszukiwać elementy w dokumencie - w taki sam sposób jak sizzle.js (używany przez jQuery).

querySelector

Zwraca pierwszy Element w dokumencie, który pasuje do zapytania. Jeśli nie ma dopasowania, zwraca 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

Zwraca NodeList zawierający wszystkie elementy w dokumencie, które pasują do zapytania. Jeśli nie pasuje, zwraca pustą 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');