DOM
Elemente abrufen

Nach ID

document.getElementById('uniqueID')

wird abrufen

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

Solange ein Element mit der angegebenen ID vorhanden ist, gibt document.getElementById nur dieses Element zurück. Andernfalls wird null .

Hinweis: IDs müssen eindeutig sein. Mehrere Elemente können nicht dieselbe ID haben.

Nach Klassenname

document.getElementsByClassName('class-name')

wird abrufen

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

Wenn keine vorhandenen Elemente die angegebene Klasse enthalten, wird eine leere Auflistung zurückgegeben.

Beispiel:

<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

Nach Tag-Name

document.getElementsByTagName('b')

wird abrufen

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

Wenn keine Elemente mit dem angegebenen Tag-Namen vorhanden sind, wird eine leere Sammlung zurückgegeben.

Mit der CSS-Auswahl

Beachten Sie folgenden HTML-Code

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

Der folgende Dom-Baum wird basierend auf dem obigen HTML-Code erstellt

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

Mit Hilfe von CSS-Selektoren können wir Elemente aus dem DOM-Baum auswählen. Dies ist mit zwei Javascript-Methoden möglich, nämlich querySelector() und querySelectorAll() .

Die Methode querySelector () gibt das erste Element zurück, das mit dem angegebenen CSS-Selektor aus dem DOM übereinstimmt.

document.querySelector('li.main')

gibt das erste li Element zurück, dessen Klasse main

document.querySelector('#two')

gibt das Element mit der ID two

HINWEIS: Wenn kein Element gefunden wird, wird null zurückgegeben. Wenn die Auswahlzeichenfolge ein CSS-Pseudoelement enthält, ist der Rückgabewert null .

Die querySelectorAll () - Methode gibt alle Elemente zurück, die dem angegebenen CSS-Selektor aus dem DOM entsprechen.

document.querySelectorAll('li.main')

gibt eine Knotenliste zurück, die alle li Elemente enthält, deren Klasse main .

HINWEIS : Wenn kein Element gefunden wird, wird eine leere Knotenliste zurückgegeben. Wenn die Auswahlzeichenfolge ein CSS-Pseudoelement enthält, ist die zurückgegebene elementList leer

Abfrage-Selektoren

In modernen Browsern [1] ist es möglich, mit einem CSS-ähnlichen Selector Elemente in einem Dokument abzufragen - genau wie sizzle.js (von jQuery verwendet).

querySelector

Gibt das erste Element im Dokument zurück, das der Abfrage entspricht. Wenn es keine Übereinstimmung gibt, wird 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

Gibt eine NodeList die alle Elemente im Dokument enthält, die der Abfrage entsprechen. Wenn keine Übereinstimmung NodeList , wird eine leere 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');