Einführung
In Understanding the DOM Tree and Nodes haben wir erläutert, wie das DOM als Baum von Objekten strukturiert ist, die als Knoten bezeichnet werden Knoten können Text, Kommentare oder Elemente sein. Normalerweise erfolgt der Zugriff auf Inhalte im DOM über einen HTML-Elementknoten.
Um kompetent auf Elemente im DOM zugreifen zu können, sind Kenntnisse der CSS-Selektoren, der Syntax und der Terminologie sowie Kenntnisse der HTML-Elemente erforderlich. In diesem Lernprogramm werden verschiedene Möglichkeiten für den Zugriff auf Elemente im DOM vorgestellt: nach ID, Klasse, Tag und Abfrageselektoren.
Überblick
Hier finden Sie eine tabellarische Übersicht der fünf Methoden, die wir in diesem Lernprogramm behandeln werden.
| Gets | Selector Syntax | Method |
|---|---|---|
ID |
|
|
Class |
|
|
Tag |
|
|
Selector (single) |
|
|
Selector (all) |
|
Es ist wichtig, dass Sie beim Studium des DOM die Beispiele auf Ihrem eigenen Computer eingeben, um sicherzustellen, dass Sie die Informationen, die Sie lernen, verstehen und aufbewahren.
Sie können diese HTML-Datei "+ access.html +" in Ihrem eigenen Projekt speichern, um die Beispiele zusammen mit diesem Artikel durchzuarbeiten. Wenn Sie nicht sicher sind, wie Sie lokal mit JavaScript und HTML arbeiten sollen, lesen Sie unser How To Add JavaScript to HTML -Tutorial.
access.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
</body>
</html>In dieser HTML-Datei haben wir viele Elemente, auf die wir mit verschiedenen "+ document" -Methoden zugreifen. Wenn wir die Datei in einem Browser rendern, sieht sie ungefähr so aus:
image: https://assets.digitalocean.com/articles/eng_javascript/dom/html-rendering.png [Browser-Rendering der Seite access.html]
Wir verwenden die verschiedenen Methoden, die wir in der Overview oben beschrieben haben, um auf die verfügbaren zuzugreifen Elemente in der Datei.
Zugriff auf Elemente über ID
Der einfachste Weg, auf ein einzelnes Element im DOM zuzugreifen, ist die eindeutige ID. Wir können ein Element anhand seiner ID mit der https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById [+ getElementById () +] -Methode des Objekts + document + erfassen.
document.getElementById();Um über ID auf das HTML-Element zuzugreifen, muss es ein "+ id " - Attribut haben. Wir haben ein " div" -Element mit der ID "+ demo +".
<div id="demo">Access me by ID</div>Holen Sie sich in der Console das Element und weisen Sie es der Variablen "+ demoId +" zu.
const demoId = document.getElementById('demo');Das Protokollieren von + demoId + in die Konsole gibt unser gesamtes HTML-Element zurück.
console.log(demoId);Output<div id="demo">Access me by ID</div>Wir können sicher sein, dass wir auf das richtige Element zugreifen, indem wir die Eigenschaft "+ border " in " purple +" ändern.
demoId.style.border = '1px solid purple';Sobald wir dies tun, wird unsere Live-Seite so aussehen:
image: https://assets.digitalocean.com/articles/eng_javascript/dom/id-element.png [Darstellung des ID-Element-Stils im Browser]
Der Zugriff auf ein Element über die ID ist eine effektive Methode, um ein Element schnell in das DOM zu übernehmen. Es hat jedoch Nachteile; Eine ID muss für die Seite immer eindeutig sein. Daher können Sie immer nur mit der Methode + getElementById () + auf ein einzelnes Element gleichzeitig zugreifen. Wenn Sie vielen Elementen auf der Seite eine Funktion hinzufügen möchten, wird der Code schnell wiederholt.
Zugreifen auf Elemente nach Klasse
Das Attribut class wird verwendet, um auf ein oder mehrere bestimmte Elemente im DOM zuzugreifen. Wir können alle Elemente mit einem bestimmten Klassennamen mit der Methode https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName [+ getElementsByClassName () +] abrufen.
document.getElementsByClassName();Jetzt möchten wir auf mehr als ein Element zugreifen, und in unserem Beispiel haben wir zwei Elemente mit einer Klasse "+ demo +".
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>Greifen wir in der Console auf unsere Elemente zu und fügen sie in eine Variable mit dem Namen "+ demoClass +" ein.
const demoClass = document.getElementsByClassName('demo');An diesem Punkt könnten Sie denken, Sie können die Elemente auf die gleiche Weise ändern, wie Sie es mit dem ID-Beispiel getan haben. Wenn wir jedoch versuchen, den folgenden Code auszuführen und die Eigenschaft "+ border +" der Klassendemo-Elemente in "orange" zu ändern, wird eine Fehlermeldung angezeigt.
demoClass.style.border = '1px solid orange';OutputUncaught TypeError: Cannot set property 'border' of undefinedDer Grund, warum dies nicht funktioniert, ist, dass wir nicht nur ein Element erhalten, sondern ein Array-ähnliches Objekt von Elementen haben.
console.log(demoClass);Output(2) [div.demo, div.demo]Auf JavaScript-Arrays muss mit einer Indexnummer zugegriffen werden. Wir können daher das erste Element dieses Arrays ändern, indem wir den Index "+ 0 +" verwenden.
demoClass[0].style.border = '1px solid orange';Im Allgemeinen möchten wir beim Zugriff auf Elemente nach Klasse eine Änderung auf alle Elemente im Dokument mit dieser bestimmten Klasse anwenden, nicht nur auf eines. Wir können dies tun, indem wir eine "+ für" -Schleife erstellen und alle Elemente im Array durchlaufen.
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}Wenn wir diesen Code ausführen, wird unsere Live-Seite folgendermaßen gerendert:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/class-element.png [Browser-Rendering des Klassenelement-Stils]
Wir haben jetzt jedes Element auf der Seite ausgewählt, das eine "+ demo " -Klasse hat, und die " border " -Eigenschaft in " orange +" geändert.
Zugriff auf Elemente über Tags
Ein weniger spezifischer Weg, um auf mehrere Elemente auf der Seite zuzugreifen, wäre der HTML-Tag-Name. Wir greifen mit der Methode https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName [+ getElementsByTagName () +] auf ein Element per Tag zu.
document.getElementsByTagName();In unserem Tag-Beispiel verwenden wir "+ article +" - Elemente.
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>Genau wie der Zugriff auf ein Element über seine Klasse gibt "+ getElementsByTagName () " ein Array-ähnliches Objekt von Elementen zurück, und wir können jedes Tag im Dokument mit einer " for" -Schleife ändern.
const demoTag = document.getElementsByTagName('article');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}Beim Ausführen des Codes wird die Live-Seite folgendermaßen geändert:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/tag-element.png [Browser-Rendering des Tag-Element-Stils]
Die Schleife änderte die Eigenschaft "+ border " aller " article " -Elemente in " blue +".
Abfrageselektoren
Wenn Sie Erfahrung mit der jQuery -API haben, sind Sie möglicherweise mit der Methode von jQuery vertraut, mit der Sie mit CSS-Selektoren auf das DOM zugreifen.
$('#demo'); // returns the demo ID element in jQueryDasselbe können wir in einfachem JavaScript mit den Methoden + querySelector () + und + querySelectorAll () + tun.
document.querySelector();
document.querySelectorAll();Um auf ein einzelnes Element zuzugreifen, verwenden wir die Methode https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector [+ querySelector () +]. In Ihrer HTML-Datei haben wir ein "+ Demo-Abfrage" -Element
<div id="demo-query">Access me by query</div>Der Selektor für ein "+ id " - Attribut ist das Hash-Symbol (" # +"). Wir können das Element mit der Demo-Abfrage-ID der Variable demoQuery zuordnen.
const demoQuery = document.querySelector('#demo-query');Bei einem Selektor mit mehreren Elementen, z. B. einer Klasse oder einem Tag, gibt + querySelector () + das erste Element zurück, das der Abfrage entspricht. Wir können die Methode https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll [+ querySelectorAll () +] verwenden, um alle Elemente zu erfassen, die einer bestimmten Abfrage entsprechen.
In unserer Beispieldatei haben wir zwei Elemente, auf die die Klasse "+ demo-query-all +" angewendet wurde.
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>Der Selektor für ein "+ class" -Attribut ist ein Punkt oder ein Punkt (". +"), Sodass wir mit " .demo-query-all" auf die Klasse zugreifen können.
const demoQueryAll = document.querySelectorAll('.demo-query-all');Mit der Methode "+ forEach () " können wir die Farbe " green" auf die Eigenschaft "+ border" aller übereinstimmenden Elemente anwenden.
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});image: https: //assets.digitalocean.com/articles/eng_javascript/dom/query-selector.png [Browser-Rendering des querySelector () -Stils]
Mit + querySelector () + fungieren durch Kommas getrennte Werte als OR-Operator. Beispiel: "+ querySelector (" div, article ") " stimmt mit " div " _oder_ " article " überein, je nachdem, was zuerst im Dokument angezeigt wird. Mit ` querySelectorAll () ` fungieren durch Kommas getrennte Werte als AND-Operator, und ` querySelectorAll ('div, article') ` stimmt mit allen ` div ` _und_ ` article +` -Werten im Dokument überein.
Die Verwendung der Abfrageselektionsmethoden ist äußerst leistungsfähig, da Sie auf jedes Element oder jede Elementgruppe im DOM wie in einer CSS-Datei zugreifen können. Eine vollständige Liste der Selektoren finden Sie unter CSS-Selektoren im Mozilla Developer Network.
Vervollständigen Sie den JavaScript-Code
Unten finden Sie das vollständige Skript der Arbeit, die wir oben ausgeführt haben. Sie können es verwenden, um auf alle Elemente auf unserer Beispielseite zuzugreifen. Speichern Sie die Datei als + access.js und laden Sie sie direkt vor dem schließenden` + body` -Tag in die HTML-Datei.
access.js
// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');
// Change border of ID demo to purple
demoId.style.border = '1px solid purple';
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red';
// Change border of class query-all to green
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});Ihre endgültige HTML-Datei sieht folgendermaßen aus:
access.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
<script src="access.js"></script>
</body>
</html>Sie können diese Vorlagendateien weiter bearbeiten, um zusätzliche Änderungen vorzunehmen, indem Sie auf HTML-Elemente zugreifen.
Fazit
In diesem Tutorial haben wir 5 Möglichkeiten vorgestellt, um auf HTML-Elemente im DOM zuzugreifen - nach ID, nach Klasse, nach HTML-Tag-Name und nach Selektor. Die Methode, mit der Sie ein Element oder eine Gruppe von Elementen abrufen, hängt von der Browserunterstützung und der Anzahl der zu bearbeitenden Elemente ab. Sie sollten sich jetzt sicher fühlen, über das DOM auf jedes HTML-Element in einem Dokument mit JavaScript zuzugreifen.