Sehen Sie sich das Video und diese interaktiven Tutorials an, um sich mit den Grundlagen der Anzeige und Änderung des DOMs einer Seite mithilfe der Chrome-Entwicklertools vertraut zu machen.
In dieser Anleitung wird davon ausgegangen, dass Sie den Unterschied zwischen DOM und HTML kennen. Eine Erläuterung finden Sie im Anhang: HTML versus DOM.
DOM-Knoten ansehen
In der DOM-Baumstruktur des Steuerfelds „Elemente“ finden Sie alle DOM-bezogenen Aktivitäten in den Entwicklertools.
Knoten prüfen
Wenn Sie sich für einen bestimmten DOM-Knoten interessieren, können Sie mit der Option Untersuchen schnell Entwicklertools öffnen und diesen Knoten untersuchen.
- Klicken Sie unten mit der rechten Maustaste auf Michelangelo und wählen Sie Untersuchen aus.
- Michelangelo
- Raphael
Der Bereich Elemente der Entwicklertools wird geöffnet.
<li>Michelangelo</li>
ist in der DOM-Baumstruktur hervorgehoben.
- Klicken Sie oben links in den Entwicklertools auf das Symbol Untersuchen.
Klicken Sie unten auf den Text Tokio.
- Tokio
Beirut
Jetzt ist
<li>Tokyo</li>
im DOM-Baum hervorgehoben.
Die Überprüfung eines Knotens ist auch der erste Schritt zum Ansehen und Ändern der Knotenstile. Siehe Erste Schritte beim Anzeigen und Ändern von CSS.
DOM-Baum mit einer Tastatur bewegen
Nachdem Sie einen Knoten in der DOM-Baumstruktur ausgewählt haben, können Sie sich mit der Tastatur darin bewegen.
Klicken Sie mit der rechten Maustaste unten auf Ringo und wählen Sie Untersuchen aus.
<li>Ringo</li>
ist im DOM-Baum ausgewählt.- George
- Ringo
- Paul
John
Drücken Sie zweimal den Aufwärtspfeil.
<ul>
ist ausgewählt.Drücken Sie den Linkspfeil. Die Liste
<ul>
wird minimiert.Drücken Sie noch einmal den Linkspfeil. Das übergeordnete Element des Knotens
<ul>
ist ausgewählt. In diesem Fall ist das der Knoten<li>
mit den Anweisungen für Schritt 1.Drücken Sie dreimal den Abwärtspfeil, um die soeben minimierte Liste
<ul>
wieder auszuwählen. Sie sollte so aussehen:<ul>...</ul>
Drücken Sie den Rechtspfeil. Die Liste wird erweitert.
In die Ansicht scrollen
Wenn Sie sich den DOM-Baum ansehen, werden Sie manchmal an einem DOM-Knoten interessiert, der sich derzeit nicht im Darstellungsbereich befindet. Angenommen, Sie haben bis zum Ende der Seite gescrollt und interessieren sich für den Knoten <h1>
oben auf der Seite. Mit In die Ansicht scrollen können Sie den Darstellungsbereich schnell neu positionieren, sodass Sie den Knoten sehen können.
Klicken Sie unten mit der rechten Maustaste auf Magritte und wählen Sie Untersuchen aus.
- Magritte
- Soutina
Gehen Sie zum Abschnitt Anhang: In die Ansicht scrollen unten auf dieser Seite. Die Anleitung wird dort fortgesetzt.
Nachdem Sie die Anweisungen unten auf der Seite ausgeführt haben, sollten Sie zurück nach oben springen.
Führungslinien anzeigen
Mit den Linealen oberhalb und links neben dem Darstellungsbereich können Sie die Breite und Höhe eines Elements messen, wenn Sie im Steuerfeld Elemente den Mauszeiger darauf bewegen.
Es gibt zwei Möglichkeiten, die Führungslinien zu aktivieren:
- Drücken Sie Strg + Umschalt + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen, geben Sie
Show rulers on hover
ein und drücken Sie die Eingabetaste. - Klicken Sie dazu auf Einstellungen > Einstellungen > Elemente > Lineal einblenden, wenn der Mauszeiger darauf bewegt wird.
Die Größeneinheit der Lineale ist Pixel.
Nach Knoten suchen
Sie können die DOM-Struktur nach String, CSS-Selektor oder XPath-Selektor suchen.
- Setzen Sie den Cursor auf das Steuerfeld Elemente.
- Drücken Sie Strg + F oder die Befehlstaste + F (Mac). Die Suchleiste wird unten in der DOM-Baumstruktur geöffnet.
Geben Sie
The Moon is a Harsh Mistress
ein. Der letzte Satz wird in der DOM-Baumstruktur hervorgehoben.
Wie bereits erwähnt, unterstützt die Suchleiste auch CSS- und XPath-Selektoren.
Im Steuerfeld Elemente wird das erste übereinstimmende Ergebnis in der DOM-Struktur ausgewählt und im Darstellungsbereich angezeigt. Dies geschieht standardmäßig während der Eingabe. Wenn Sie immer mit langen Suchanfragen arbeiten, können Sie festlegen, dass die Entwicklertools die Suche nur ausführen, wenn Sie die Eingabetaste drücken.
Entfernen Sie das Häkchen aus dem Kästchen Einstellungen > Einstellungen > Global > Während der Eingabe suchen, um unnötige Sprünge zwischen Knoten zu vermeiden.
DOM bearbeiten
Sie können das DOM direkt bearbeiten und sehen, wie sich diese Änderungen auf die Seite auswirken.
Inhalte bearbeiten
Wenn Sie den Inhalt eines Knotens bearbeiten möchten, klicken Sie doppelt auf den Inhalt in der DOM-Struktur.
Klicken Sie unten mit der rechten Maustaste auf Michelle und wählen Sie Untersuchen aus.
- Braten
- Michelle
Doppelklicken Sie in der DOM-Baumstruktur auf
Michelle
. Mit anderen Worten: Doppelklicken Sie auf den Text zwischen<li>
und</li>
. Der Text wird blau hervorgehoben, um anzuzeigen, dass er ausgewählt ist.Löschen Sie
Michelle
, geben SieLeela
ein und drücken Sie die Eingabetaste, um die Änderung zu bestätigen. Der obige Text ändert sich von Michelle in Leela.
Attribute bearbeiten
Wenn Sie Attribute bearbeiten möchten, klicken Sie doppelt auf den Attributnamen oder -wert. Folgen Sie der Anleitung unten, um zu erfahren, wie Sie einem Knoten Attribute hinzufügen.
Klicken Sie mit der rechten Maustaste unten auf Howard und wählen Sie Untersuchen aus.
- Howard
- Vince
Doppelklicken Sie auf
<li>
. Der Text wird hervorgehoben, um anzuzeigen, dass der Knoten ausgewählt ist.Drücken Sie den Rechtspfeil, fügen Sie ein Leerzeichen hinzu, geben Sie
style="background-color:gold"
ein und drücken Sie die Eingabetaste. Die Hintergrundfarbe des Knotens ändert sich in Gold.
Sie können auch die Option Attribut bearbeiten mit der rechten Maustaste verwenden.
Knotentyp bearbeiten
Doppelklicken Sie auf den Typ eines Knotens, um ihn zu bearbeiten, und geben Sie dann den neuen Typ ein.
Klicken Sie unten mit der rechten Maustaste auf Hank und wählen Sie Untersuchen aus.
- Dekan
- Hank
- Thaddäus
- Brock
Doppelklicken Sie auf
<li>
. Der Text „li
“ ist hervorgehoben.Löschen Sie
li
, geben Siebutton
ein und drücken Sie die Eingabetaste. Der Knoten<li>
wird in einen<button>
-Knoten geändert.
Als HTML bearbeiten
Um Knoten als HTML mit Syntaxhervorhebung und automatischer Vervollständigung zu bearbeiten, wählen Sie im Drop-down-Menü des Knotens die Option Als HTML bearbeiten aus.
Klicken Sie unten mit der rechten Maustaste auf Leonard und wählen Sie Untersuchen aus.
- Penny
- Howard
- Rajesh
- Leonard
Klicken Sie im Steuerfeld Elemente mit der rechten Maustaste auf den aktuellen Knoten und wählen Sie im Drop-down-Menü Als HTML bearbeiten aus.
Drücken Sie die Eingabetaste, um eine neue Zeile zu beginnen, und geben Sie den Text
<l
ein. Die Entwicklertools hebt HTML-Syntax und Tags für die automatische Vervollständigung hervor.Wählen Sie im Menü für die automatische Vervollständigung das Element
li
aus und geben Sie>
ein. In den Entwicklertools wird nach dem Cursor automatisch das schließende</li>
-Tag hinzugefügt.Geben Sie
Sheldon
innerhalb des Tags ein und drücken Sie Strg / Cmd + Eingabetaste, um die Änderungen zu übernehmen.
Knoten duplizieren
Mit der Option Element duplizieren können Sie ein Element duplizieren.
Klicken Sie mit der rechten Maustaste unten auf Nana und wählen Sie Untersuchen aus.
- Feuer der Eitelkeiten
- Nana
- Orlando
- Weißes Rauschen
Klicken Sie im Steuerfeld Elemente mit der rechten Maustaste auf
<li>Nana</li>
und wählen Sie im Drop-down-Menü Element duplizieren aus.Kehren Sie zur Seite zurück. Das Listenelement wurde sofort dupliziert.
Sie können auch die folgenden Tastenkombinationen verwenden: Umschalttaste + Alt + Abwärtspfeil (Windows und Linux) oder Umschalttaste + Wahltaste + Abwärtspfeil (MacOS).
Knoten-Screenshot erstellen
Sie können einen Screenshot von jedem einzelnen Knoten in der DOM-Baumstruktur erstellen, indem Sie Screenshot von Knoten aufnehmen verwenden.
Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild auf dieser Seite und wählen Sie Untersuchen aus.
Klicken Sie im Bereich Elemente mit der rechten Maustaste auf die Bild-URL und wählen Sie im Drop-down-Menü Knoten-Screenshot aufnehmen aus.
Der Screenshot wird in deinen Downloads gespeichert.
DOM-Knoten neu anordnen
Ziehen Sie Knoten, um sie neu anzuordnen.
Klicken Sie mit der rechten Maustaste unten auf Elvis Presley und wählen Sie Untersuchen aus. Beachten Sie, dass es das letzte Element in der Liste ist.
- Stevie Wunder
- Tom Wartet
- Chris Thile
- Elvis Presley
Ziehen Sie
<li>Elvis Presley</li>
in der DOM-Baumstruktur an den Anfang der Liste.
Status erzwingen
Sie können erzwingen, dass Knoten im Status :active
, :hover
, :focus
, :visited
und :focus-within
verbleiben.
Bewegen Sie den Mauszeiger unten über Herr der Fliegen. Die Hintergrundfarbe wird orange.
- Der Herr der Fliegen
- Verbrechen und Strafen
- Moby
Klicken Sie mit der rechten Maustaste oben auf Herr der Fliegen und wählen Sie Untersuchen aus.
Klicken Sie mit der rechten Maustaste auf
<li class="demo--hover">The Lord of the Flies</li>
und wählen Sie Force State > :hover aus. Wenn Sie diese Option nicht sehen, lesen Sie den Abschnitt Anhang: Fehlende Optionen. Die Hintergrundfarbe bleibt orange, obwohl Sie nicht mit der Maus auf den Knoten zeigen.
Knoten ausblenden
Drücken Sie H, um einen Knoten auszublenden.
Klicken Sie mit der rechten Maustaste unten auf The Stars My Target und wählen Sie Inspect aus.
- Der Graf Monte Cristo
- The Stars My Destination
Drücken Sie die Taste H. Der Knoten ist ausgeblendet. Sie können auch mit der rechten Maustaste auf den Knoten klicken und die Option Element ausblenden verwenden.
Drücken Sie noch einmal die Taste H. Der Knoten wird wieder angezeigt.
Knoten löschen
Drücken Sie Entf, um einen Knoten zu löschen.
Klicken Sie mit der rechten Maustaste unten auf Grundlage und wählen Sie Untersuchen aus.
- Der illustrierte Mann
- Durch den Blick
- Basis
Drücken Sie die Taste Entf. Der Knoten wird gelöscht. Sie können auch mit der rechten Maustaste auf den Knoten klicken und die Option Element löschen verwenden.
Drücken Sie Strg + Z oder die Befehlstaste + Z (Mac). Die letzte Aktion wird rückgängig gemacht und der Knoten wird wieder angezeigt.
Zugriffsknoten in der Console
Die Entwicklertools bieten einige Verknüpfungen für den Zugriff auf DOM-Knoten über die Console oder für das Abrufen von JavaScript-Referenzen darauf.
Auf den aktuell ausgewählten Knoten mit $0 verweisen
Wenn Sie einen Knoten prüfen, bedeutet der Text == $0
neben dem Knoten, dass Sie in der Console mit der Variablen $0
auf diesen Knoten verweisen können.
Klicken Sie unten mit der rechten Maustaste auf Die linke Hand der Dunkelheit und wählen Sie Untersuchen aus.
- Die linke Hand der Dunkelheit
- Düne
Drücken Sie die Esc-Taste, um die Konsolenleiste zu öffnen.
Geben Sie
$0
ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks zeigt, dass$0
als<li>The Left Hand of Darkness</li>
ausgewertet wird.Bewegen Sie den Mauszeiger auf das Ergebnis. Der Knoten wird im Darstellungsbereich hervorgehoben.
Klicken Sie in der DOM-Struktur auf
<li>Dune</li>
, geben Sie$0
noch einmal in der Console ein und drücken Sie noch einmal die Eingabetaste. Jetzt wird$0
als<li>Dune</li>
ausgewertet.
Als globale Variable speichern
Wenn Sie mehrmals auf einen Knoten verweisen müssen, speichern Sie ihn als globale Variable.
Klicken Sie mit der rechten Maustaste unten auf The Big Sleep und wählen Sie Untersuchen aus.
- Der große Schlaf
- Der Lange Abschied
Klicken Sie mit der rechten Maustaste auf
<li>The Big Sleep</li>
in der DOM-Struktur und wählen Sie Als globale Variable speichern aus. Wenn Sie diese Option nicht sehen, lesen Sie den Abschnitt Anhang: Fehlende Optionen.Geben Sie
temp1
in die Console ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks zeigt, dass die Variable den Knoten ergibt.
JS-Pfad kopieren
Kopieren Sie den JavaScript-Pfad in einen Knoten, wenn Sie in einem automatisierten Test darauf verweisen müssen.
Klicken Sie mit der rechten Maustaste unten auf Die Brüder Karamazov und wählen Sie Untersuchen aus.
- Die Brüder Karamazow
- Verbrechen und Strafen
Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf
<li>The Brothers Karamazov</li>
und wählen Sie Kopieren > JS-Pfad kopieren aus. Eindocument.querySelector()
-Ausdruck, der in den Knoten aufgelöst wird, wurde in die Zwischenablage kopiert.Drücken Sie Strg + V oder Befehlstaste + V (Mac), um den Ausdruck in die Konsole einzufügen.
Drücken Sie die Eingabetaste, um den Ausdruck auszuwerten.
Unterbrechung bei DOM-Änderungen
Mit den Entwicklertools kannst du den JavaScript-Code einer Seite pausieren, wenn JavaScript das DOM ändert. Siehe DOM-Haltepunkte ändern.
Nächste Schritte
Dies deckt die meisten DOM-bezogenen Funktionen in den Entwicklertools ab. Sie können den Rest entdecken, indem Sie mit der rechten Maustaste auf Knoten im DOM-Baum klicken und mit den anderen Optionen experimentieren, die in dieser Anleitung nicht behandelt wurden. Weitere Informationen finden Sie unter Tastenkombinationen für den Bereich „Elemente“.
Auf der Startseite der Chrome-Entwicklertools finden Sie weitere Informationen zu den Entwicklertools.
Unter Community können Sie sich an das DevTools-Team wenden oder Hilfe von der DevTools-Community erhalten.
Anhang: HTML im Vergleich zum DOM
In diesem Abschnitt wird kurz der Unterschied zwischen HTML und dem DOM erläutert.
Wenn Sie einen Webbrowser verwenden, um eine Seite wie https://example.com
anzufordern, gibt der Server folgenden HTML-Code zurück:
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>
Der Browser parst den HTML-Code und erstellt eine Baumstruktur von Objekten wie die folgende:
html
head
title
body
h1
p
script
Diese Baumstruktur von Objekten oder Knoten, die den Inhalt der Seite darstellen, wird als DOM bezeichnet. Im Moment sieht er genauso aus wie der HTML-Code, aber nehmen wir an, dass das Skript, auf das am Ende des HTML-Codes verwiesen wird, diesen Code ausführt:
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);
Mit diesem Code wird der h1
-Knoten entfernt und dem DOM ein weiterer p
-Knoten hinzugefügt. Das vollständige DOM sieht jetzt so aus:
html
head
title
body
p
script
p
Der HTML-Code der Seite unterscheidet sich jetzt vom DOM. Mit anderen Worten, HTML stellt den anfänglichen Seiteninhalt und das DOM den aktuellen Seiteninhalt dar. Wenn JavaScript Knoten hinzufügt, entfernt oder bearbeitet, unterscheidet sich das DOM von dem HTML-Code.
Weitere Informationen finden Sie unter Einführung in das DOM.
Anhang: In die Ansicht scrollen
Dies ist eine Fortsetzung des Abschnitts In die Ansicht scrollen. Folgen Sie der Anleitung unten, um diesen Abschnitt auszufüllen.
- Der
<li>Magritte</li>
-Knoten sollte noch in Ihrer DOM-Struktur ausgewählt sein. Wenn nicht, kehren Sie zu In die Ansicht scrollen zurück und beginnen Sie von vorn. Klicken Sie mit der rechten Maustaste auf den Knoten
<li>Magritte</li>
und wählen Sie In die Ansicht scrollen aus. Der Darstellungsbereich scrollt wieder nach oben, sodass Sie den Magritte-Knoten sehen können. Wenn die Option In die Ansicht scrollen nicht angezeigt wird, finden Sie weitere Informationen unter Anhang: Fehlende Optionen.
Anhang: Fehlende Optionen
In vielen Anweisungen in dieser Anleitung werden Sie angewiesen, mit der rechten Maustaste auf einen Knoten in der DOM-Struktur zu klicken und dann eine Option aus dem eingeblendeten Kontextmenü auszuwählen. Wenn Sie die angegebene Option im Kontextmenü nicht sehen, klicken Sie mit der rechten Maustaste weg vom Knotentext.