Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente, die vom Browser erstellt wird, sobald das Dokument geladen ist. Eine Webseite ist im Wesentlichen ein Dokument, das durch das DOM als Knoten und Objekte dargestellt wird. Es erlaubt Programmen, den Inhalt, die Struktur und die Stile des Dokuments zu manipulieren.
In diesem Tutorial werden wir lernen, wie man mit JavaScript auf verschiedene Knoten (HTML-Elemente) im DOM zugreift. Beginnen wir mit der ersten Methode: Element nach ID holen.
Element nach ID holen
Die document-Methode nimmt die Element-ID als Eingabe und gibt ein Element-Objekt zurück, das das DOM-Element darstellt. Hier ein Beispiel:
<div>🦄</div>Nun können wir das obige <div>-Element mit Hilfe seiner ID erhalten:
const unicorn = document.getElementById('unicorn');Die ID unterscheidet Groß- und Kleinschreibung und ist im gesamten HTML-Dokument eindeutig. Diese Methode gibt also immer ein einzelnes Element zurück. Wird kein passendes Element gefunden, wird null zurückgegeben.
Hinweis: Setzen Sie beim Aufruf der Methode
getElementById()das Zeichen#nicht vor den ID-String. Sie erhaltennullanstelle des Elements, und dann können Sie sich stundenlang fragen, was schief gelaufen ist.
Elemente nach Tag-Name abrufen
Die Methode getElementsByTagName() wird verwendet, um auf mehrere Elemente zuzugreifen. Sie nimmt den Tag-Namen als Eingabe und gibt alle DOM-Elemente, die dem Tag-Namen entsprechen, als HTMLCollection zurück:
<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>JavaScript-Code, um auf alle <p>-Elemente zuzugreifen:
const animals = document.getElementsByTagName('p');Diese Methode sucht immer nur einen Tag-Namen auf einmal. Wenn Sie aber * als Tag-Namen übergeben, erhalten Sie alle Elemente im DOM:
const allNodes = document.getElementsByTagName('*');Elemente nach Namen holen
Die Methode getElementsByName() dient dazu, eine Sammlung von Elementen nach ihrem name-Attribut zu holen, und gibt ein NodeList-Objekt zurück:
<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob">Lassen Sie uns alle Elemente mit dem Namen email holen:
const emails = document.getElementsByName('email');Hinweis: Anders als das
id-Attribut, das eindeutig sein muss, können mehrere HTML-Elemente das gleichename-Attribut haben. Deshalb gibtgetElementsByName()eine Sammlung von Knoten zurück.
Elemente nach Klassenname abrufen
Möchten Sie das class-Attribut verwenden, um eine Liste von passenden Elementen zu erhalten? Sie können die getElementsByClassName()-Methode verwenden. Übergeben Sie ihr einfach einen Klassennamen (ohne .) und sie liefert ein HTMLCollection aller DOM-Elemente, die den angegebenen Klassennamen haben:
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>Lassen Sie uns alle bird’s holen:
const birds = document.getElementsByClassName('bird');Diese Methode akzeptiert auch mehrere Klassennamen, die durch Leerzeichen getrennt sind. Holen wir uns alle Elemente, die sowohl die Klassen bird und eagle haben:
const eagle = document.getElementsByClassName('bird eagle');Query Selector
Die querySelector()-Methode ist eine der beiden modernen JavaScript-Methoden, mit denen Sie Elemente aus dem DOM holen können, die auf CSS-Selektoren basieren. Übergeben Sie einfach den CSS-Selektor und Sie erhalten das erste Element, das mit dem angegebenen Selektor übereinstimmt. Wenn es keine Übereinstimmungen gibt, wird null zurückgegeben. Hier ein Beispiel:
const email = document.querySelector('#signup input');Abfrage Selektor Alle
Wollen Sie eine Liste von Elementen auswählen, die mit den angegebenen Selektoren übereinstimmen? Verwenden Sie stattdessen die Methode querySelectorAll(). Diese Methode nimmt mehrere CSS-Selektoren als Eingabe und gibt eine NodeList zurück – eine Liste von DOM-Elementen, die mit den angegebenen Selektoren übereinstimmen. Lassen Sie uns alle Elemente mit einer Klasse von entweder bird oder animal aus dem obigen HTML-Markup auswählen:
const elems = document.querySelectorAll('.bird, .animal');console.log(elems.length); // 4Funktionsverkettung
Sie können auch mehrere Funktionen miteinander verketten, um Elemente innerhalb eines anderen Elements zu suchen. Dazu müssen Sie zunächst ein einzelnes Element entweder mit getElementById() oder querySelector() auswählen und dann eine weitere Funktion verketten, um darin zu suchen:
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>Geben Sie alle input Elemente an, die sich innerhalb eines Elements mit der ID signup befinden:
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');Traversieren von HTMLCollection und NodeList
Die meisten der oben beschriebenen Methoden (außer getElementById() und querySelector()) geben mehrere Elemente entweder als HTMLCollection oder als NodeList zurück.
Das HTMLCollection ist kein Array, sondern eine generische Sammlung von Elementen. Es ist also nicht möglich, mit forEach() oder map() darüber zu iterieren. Wir können es jedoch in ein echtes Array umwandeln und dann mit der Array.from()-Methode iterieren:
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);});Obwohl NodeList auch kein Array ist, bietet es die forEach()-Methode, um über die Elemente zu iterieren:
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});Abschluss
Das war’s zum Abrufen von DOM-Elementen mit JavaScript. Wir haben so viele verschiedene Methoden gelernt, um auf die DOM-Elemente zuzugreifen: mit dem id-Attribut, dem HTML-Tag-Namen, dem name-Attribut, dem class-Attribut und CSS-Selektoren. Wir haben auch Möglichkeiten besprochen, über die generische Sammlung von Elementen zu iterieren, die von diesen Methoden zurückgegeben werden.
✌️ Gefällt Ihnen dieser Artikel? Folgen Sie @attacomsian auf Twitter. Sie können mir auch auf LinkedIn und DEV folgen. RSS-Feed abonnieren.
👋 Wenn Sie meine Artikel gerne lesen und mich dabei unterstützen wollen, weiterhin kostenlose Tutorials zu erstellen, ☕ Kaufen Sie mir einen Kaffee (Kostenpunkt 5$).