DOM
Elementen ophalen

Op ID

document.getElementById('uniqueID')

zal ophalen

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

Zolang er een element met de opgegeven ID bestaat, retourneert document.getElementById alleen dat element. Anders keert het null terug.

Opmerking: ID's moeten uniek zijn. Meerdere elementen kunnen niet dezelfde ID hebben.

Op klassennaam

document.getElementsByClassName('class-name')

zal ophalen

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

Als er geen bestaande elementen de opgegeven klasse bevatten, wordt een lege verzameling geretourneerd.

Voorbeeld:

<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

Op tagnaam

document.getElementsByTagName('b')

zal ophalen

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

Als er geen elementen met de opgegeven tagnaam bestaan, wordt een lege verzameling geretourneerd.

Door CSS Selector

Overweeg de HTML-code te volgen

<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>

De volgende dom tree wordt opgebouwd op basis van bovenstaande html-code

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

We kunnen elementen selecteren uit de DOM-structuur met behulp van CSS-selectors. Dit is mogelijk door middel van twee javascript-methoden, namelijk querySelector() en querySelectorAll() .

querySelector () methode retourneert het eerste element dat overeenkomt met de gegeven css-selector van de DOM.

document.querySelector('li.main')

geeft het eerste li element terug wiens klasse het main

document.querySelector('#two')

retourneert het element met id two

OPMERKING: Als er geen element wordt gevonden, wordt null geretourneerd. Als de selector string een CSS pseudo-element bevat, is de return null .

querySelectorAll () methode retourneert alle elementen die overeenkomen met de gegeven css-selector van de DOM.

document.querySelectorAll('li.main')

geeft een lijst met knooppunten terug die alle li elementen bevat wiens klasse main .

OPMERKING : Als er geen element wordt gevonden, wordt een lege knooppuntenlijst geretourneerd. Als de selector-string een CSS-pseudo-element bevat, is de geretourneerde elementList leeg

Zoekopdrachtkiezers

In moderne browsers [1] is het mogelijk om op CSS-achtige selector te zoeken naar elementen in een document - op dezelfde manier als sizzle.js (gebruikt door jQuery).

querySelector

Retourneert het eerste Element in het document dat overeenkomt met de query. Als er geen overeenkomst is, wordt null geretourneerd.

// 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

Retourneert een NodeList die alle elementen in het document bevat die overeenkomen met de query. Als er geen overeenkomst is, wordt een lege 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');