Das Document Object Model (DOM) ist die strukturelle Darstellung eines HTML-Dokuments. Das DOM ist ein Knotenbaum, den der Browser für jede Webseite im Internet erstellt.

Das DOM ist objektorientiert. Jedes Element im DOM verfügt über einen eigenen Satz von Attributen und Methoden, auf die Sie mit JavaScript zugreifen können.

In diesem Tutorial-Artikel erfahren Sie, wie Sie DOM-Selektorfunktionen verwenden, um auf Elemente einer Webseite zuzugreifen.

So greifen Sie auf DOM-Elemente zu

Sie können über das globale Dokumentobjekt auf das DOM-Element der obersten Ebene einer Webseite zugreifen. Wenn Sie beispielsweise eine Webseite wie die folgende haben:

Herzlich willkommen


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Etwa


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Artikel



Artikeltitel eins


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Weiterlesen 





Artikeltitel 2


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Weiterlesen 





Artikeltitel Drei


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Weiterlesen 





Artikeltitel Vier


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Weiterlesen 

Tippen dokumentieren in Ihrer Browser-Konsole und das Drücken der Eingabetaste erzeugt die folgende Ausgabe:

Die Ausgabe in Ihrer Konsole ist interaktiv. Sie können auf die klicken Kopf und Karosserie Elemente, um sie zu erweitern. Dies erzeugt die folgende Ausgabe:

Jedes Abschnittselement in der Tag ist auch erweiterbar. Abhängig von der Struktur einer Webseite werden die Elemente weiter erweitert, um weitere Elemente anzuzeigen. Dies sollte Ihnen ein klareres Verständnis der Struktur des DOM vermitteln.

Verwandt: Der versteckte Held der Websites: Das DOM verstehen

Das Dokumentobjekt hat eine besondere Eigenschaft, Karosserie, das das Körperelement darstellt. Um auf das body-Element zuzugreifen, können Sie Folgendes in die Konsole eingeben:

document.body

Dies erzeugt die folgende Ausgabe:

Aber das ist so weit, wie Sie mit Objekteigenschaften gehen können. Jede Seite hat einen Kopf und einen Hauptteil, ist aber ansonsten einzigartig. Also tippen document.body.section oder ähnliches wird einfach nicht so funktionieren, wie Sie es möchten. Stattdessen gibt es Methoden, die Sie für das Dokumentobjekt aufrufen können, um auf bestimmte Elemente zuzugreifen.

Was sind DOM-Elementselektoren?

DOM-Elementselektoren sind eine Gruppe von JavaScript-Methoden, die Sie für das Dokumentobjekt verwenden können, um auf Elemente in einer Webseite zuzugreifen. DOM-Elementselektoren haben zwei Kategorien – Einzel- und Mehrfachselektoren.

Diese Funktionen verhalten sich ähnlich wie CSS-Selektoren. Sie ermöglichen es Ihnen, Elemente basierend auf ihrem Tag-Namen oder ihren ID- und Klassenattributen abzurufen. Sie können sogar Elemente mit einem beliebigen CSS-Selektor abrufen.

Verwandt: So zielen Sie mit CSS-Selektoren auf einen Teil einer Webseite ab

Die Einzelelement-Selektoren sind:

• getElementById()
• querySelector()

Die Mehrfachelement-Selektoren sind:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Der von Ihnen verwendete DOM-Elementselektor hängt von den Elementen ab, auf die Sie zugreifen möchten.

Verwenden von Einzel-DOM-Elementselektoren

Sie werden hauptsächlich Selektoren in JavaScript-Anwendungen sehen. Gehen wir also von der Konsole weg. Erstellen Sie eine JavaScript-Datei und verknüpfen Sie sie mithilfe des folgenden Skript-Tags mit Ihrer HTML-Datei:

Dabei ist der src-Wert der Name Ihrer JavaScript-Datei. Platzieren Sie dieses Skript-Tag direkt vor Ihrem schließenden body-Tag. .

Der getElementById() -Methode bietet Zugriff auf ein einzelnes Element auf einer Webseite unter Verwendung des Werts seiner ID. Im obigen HTML-Dokument gibt es mehrere Elemente mit IDs. Um die div -Element mit der ID „article-3“ können Sie Ihrer JavaScript-Datei folgenden Code hinzufügen:

value = document.getElementById('article-3')

Nun das div-Element mit dem Artikel-3 ID und alle zugehörigen Eigenschaften sind über das Wert Variable. Sie können die ausdrucken Wert Variable an die Konsole mit der folgenden Codezeile:

Konsole.log (Wert)

Sie sehen den Klassennamen, der dem div-Element zugewiesen ist, sowie andere wichtige Attribute, z. B. den inneren HTML-Code.

Der andere Einzelelement-Selektor ist der querySelector(). Diese Funktion ist vielseitiger, da Sie ihr einen beliebigen CSS-Selektor-String übergeben können. Sie können damit jedoch immer nur ein Element gleichzeitig auswählen.

Im obigen HTML-Layout gibt es beispielsweise eine einzelne Klasse – Artikel. Vier div-Elemente verwenden diese Klasse, aber die querySelector() -Funktion gibt nur das erste Element zurück, das die Klasse "Artikel" hat.

Verwenden von querySelector() mit einer Klasse

Fügen Sie am Ende Ihres Skripts den folgenden Code hinzu:

Wert = document.querySelector('.articles')
Konsole.log (Wert)

Dies wird nur das erste zurückgeben div Element mit einer "Artikel"-Klasse. Beachten Sie, dass Sie den Selektor im gleichen Format wie einen CSS-Selektor angeben. In CSS gibt ein führender Punkt einen Klassennamen an.

Verwenden von querySelector() mit einer ID

Wert = document.querySelector('#article-3')
Konsole.log (Wert)

Dieser Code gibt das einzige Element mit einer „Artikel-3“-ID zurück, das dritte div Element mit einer "Artikel"-Klasse. Auch hier verwendet die Selektorzeichenfolge die Standard-CSS-Syntax mit a # Symbol, das eine ID angibt.

Verwenden mehrerer DOM-Elementselektoren

Die verbleibenden Selektorfunktionen rufen Elementgruppen ab. Sie sind getElementsByTagName(), getElementsByClassName(), und querySelectorAll().

getElementsByTagName() verwenden

Der getElementsByTagName() selector ruft eine Gruppe von Elementen mit demselben Tag-Namen ab. Wenn Sie beispielsweise alle h2 Elemente auf einer Webseite können Sie den folgenden Code verwenden:

Wert = document.getElementsByTagName('h2')
Konsole.log (Wert)

Dadurch werden alle h2-Elemente in einer HTML-Sammlung namens value gespeichert.

getElementsByClassName() verwenden

Der getElementsByClassName() selector gibt eine Sammlung von Elementen mit demselben Klassennamen zurück.

Wert = document.getElementsByClassName('Artikel')
Konsole.log (Wert)

Wenn Sie den obigen Code in Ihre JavaScript-Datei einfügen, werden die vier div-Elemente mit dem Klassennamen „articles“ in der Browserkonsole zurückgegeben.

Verwenden von querySelectorAll()

Der querySelectorAll() -Methode gibt eine Knotenliste aller Elemente zurück, die dem angegebenen Selektor entsprechen. Um auf alle Absatzelemente im Blogbereich zuzugreifen, können Sie den folgenden Code verwenden:

Wert = document.querySelectorAll('#blog p')
Konsole.log (Wert)

Sie können sogar mehrere Selektoren in die Zeichenfolge einfügen, die Sie jeweils durch ein Komma trennen, genau wie in CSS:

Wert = document.querySelectorAll('h2, .articles')
Konsole.log (Wert)

Verwenden Sie DOM-Selektoren, um dynamische Webseiten zu erstellen

An dieser Stelle sollten Sie ein klares Verständnis des DOM und seiner Funktionsweise haben. Sie sollten auch die verschiedenen Einfach- und Mehrfachselektoren kennen und wissen, wie man sie verwendet.

Der Zugriff auf HTML-Elemente ist jedoch nur der erste Schritt zu dem, was Sie mit DOM-Selektoren tun können. DOM-Selektoren werden Ihnen dabei helfen, die funktionalen Aspekte Ihrer Website zu entwickeln, wie z. B. die Verarbeitung von Onclick- und Onscroll-Ereignissen.

So machen Sie Ihre Website mit CSS und JavaScript reaktionsschnell und interaktiv

Sie haben Ihre Website mit HTML und CSS eingerichtet, müssen jetzt jedoch Logik hinzufügen. Hier ist, was zu tun ist.

Weiter lesen

Über den Autor