Sehen Sie sich das Video an und absolvieren Sie diese interaktiven Anleitungen, um die Grundlagen zum Anzeigen und Ändern des DOMs einer Seite mit den Chrome-Entwicklertools kennenzulernen.
In dieser Anleitung wird davon ausgegangen, dass Sie den Unterschied zwischen DOM und HTML kennen. Eine Erklärung finden Sie im Anhang: HTML im Vergleich zum DOM.
DOM-Knoten ansehen
In der DOM-Baumstruktur des Steuerfelds „Elemente“ führen Sie alle DOM-bezogenen Aktivitäten in den Entwicklertools aus.
Knoten prüfen
Wenn Sie sich für einen bestimmten DOM-Knoten interessieren, können Sie mit Inspect schnell die 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 in den Entwicklertools wird geöffnet.
<li>Michelangelo</li>
ist in der DOM-Baumstruktur hervorgehoben.
- Klicken Sie oben links in den Entwicklertools auf das Symbol Inspect (Prüfen).
Klicken Sie unten auf den Text Tokio.
- Tokio
Beirut
Jetzt wird
<li>Tokyo</li>
im DOM-Baum hervorgehoben.
Die Überprüfung eines Knotens ist auch der erste Schritt, um die Stile eines Knotens anzuzeigen und zu ändern. Weitere Informationen finden Sie unter Erste Schritte mit dem Anzeigen und Ändern von CSS.
Mit einer Tastatur in der DOM-Struktur navigieren
Nachdem Sie einen Knoten in der DOM-Struktur ausgewählt haben, können Sie mit Ihrer Tastatur in der DOM-Struktur navigieren.
Klicken Sie unten mit der rechten Maustaste auf Ringo und wählen Sie Untersuchen aus.
<li>Ringo</li>
ist in der DOM-Struktur 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 es der Knoten<li>
mit der Anleitung für Schritt 1.Drücken Sie dreimal den Abwärtspfeil, um die gerade minimierte
<ul>
-Liste wieder auszuwählen. Er sollte so aussehen:<ul>...</ul>
Drücken Sie den Rechtspfeil. Die Liste wird maximiert.
In Ansicht scrollen
Wenn Sie sich die DOM-Baumstruktur ansehen, interessieren Sie sich manchmal für einen DOM-Knoten, der sich derzeit nicht im Darstellungsbereich befindet. Angenommen, Sie haben bis zum Ende der Seite gescrollt und interessieren sich für den <h1>
-Knoten oben auf der Seite. Mit In die Ansicht scrollen können Sie den Darstellungsbereich schnell neu positionieren, damit Sie den Knoten sehen können.
Klicken Sie unten mit der rechten Maustaste auf Magritte und wählen Sie Untersuchen aus.
- Magritte
- Soutine
Gehen Sie zum Abschnitt Anhang: In Ansicht scrollen unten auf dieser Seite. Die Anleitung wird dort fortgesetzt.
Nachdem Sie die Anweisungen unten auf der Seite ausgeführt haben, sollten Sie hierher zurückspringen.
Führungslinien anzeigen
Mit Linealen über und links vom Darstellungsbereich können Sie die Breite und Höhe eines Elements messen, wenn Sie den Mauszeiger im Steuerfeld Elemente darauf bewegen.
Sie haben zwei Möglichkeiten, die Lineale zu aktivieren:
- Drücken Sie Strg Umschalttaste P oder Befehl Umschalttaste P (Mac), um das Befehlsmenü zu öffnen. Geben Sie
Show rulers on hover
ein und drücken Sie die Eingabetaste. - Gehen Sie zu Einstellungen > Einstellungen > Elemente > Lineal einblenden, wenn der Mauszeiger darauf bewegt wird.
Die Größeneinheit der Lineale sind Pixel.
Nach Knoten suchen
Sie können die DOM-Struktur nach String, CSS-Selektor oder XPath-Selektor durchsuchen.
- Bewegen Sie den Cursor auf den Bereich Elemente.
- Drücken Sie Strg F oder die Befehlstaste F (Mac). Die Suchleiste wird unten im DOM-Baum geöffnet.
Geben Sie
The Moon is a Harsh Mistress
ein. Der letzte Satz ist im DOM-Baum hervorgehoben.
Wie bereits erwähnt, unterstützt die Suchleiste auch CSS- und XPath-Selektoren.
Im Steuerfeld Elemente wird das erste übereinstimmende Ergebnis im DOM-Baum ausgewählt und im Darstellungsbereich eingeblendet. 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 > Suche während der Eingabe, um unnötige Sprünge zwischen Knoten zu vermeiden.
DOM bearbeiten
Sie können das DOM sofort bearbeiten und sehen, wie sich diese Änderungen auf die Seite auswirken.
Inhalte bearbeiten
Um den Inhalt eines Knotens zu bearbeiten, doppelklicken Sie 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-Struktur auf
Michelle
. Mit anderen Worten: Doppelklicken Sie auf den Text zwischen<li>
und</li>
. Der Text wird blau hervorgehoben, um anzuzeigen, dass das Element ausgewählt ist.„
Michelle
“ löschen, „Leela
“ eingeben und dann die Eingabetaste drücken, um die Änderung zu bestätigen. Der Text oben ändert sich von Michelle zu Leela.
Attribute bearbeiten
Um Attribute zu bearbeiten, doppelklicken Sie auf den Attributnamen oder -wert. Folgen Sie der Anleitung unten, um zu erfahren, wie Sie einem Knoten Attribute hinzufügen.
Klicken Sie unten mit der rechten Maustaste auf Howard und wählen Sie Untersuchen aus.
- Howard
- Logo: 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 ein, geben Sie
style="background-color:gold"
ein und drücken Sie dann 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
Um den Typ eines Knotens zu bearbeiten, doppelklicken Sie auf den Typ 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 markiert.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 mit Syntaxhervorhebung und automatischer Vervollständigung als HTML 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
- Rafael
- Leonard
Klicken Sie im Bereich Elemente mit der rechten Maustaste auf den aktuellen Knoten und wählen Sie im Drop-down-Menü die Option Als HTML bearbeiten aus.
Drücken Sie die Eingabetaste, um eine neue Zeile zu schreiben, und geben Sie
<l
ein. Die Entwicklertools heben die HTML-Syntax und die automatische Vervollständigung von Tags für Sie hervor.Wählen Sie aus dem Menü für die automatische Vervollständigung das Element
li
aus und geben Sie>
ein. Die Entwicklertools fügen automatisch das schließende</li>
-Tag nach dem Cursor ein.Geben Sie im Tag
Sheldon
ein und drücken Sie Strg / Befehlstaste Eingabetaste, um die Änderungen zu übernehmen.
Knoten duplizieren
Mit der Rechtsklickoption Element duplizieren können Sie ein Element duplizieren.
Klicken Sie unten mit der rechten Maustaste auf Nana und wählen Sie Untersuchen aus.
- Lagerfeuer der Waschtische
- Nana
- Orlando
- Weißes Rauschen
Klicken Sie im Bereich 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. Der Listeneintrag wurde sofort dupliziert.
Sie können auch die Tastenkombinationen Umschalttaste Alt Abwärtspfeil (Windows und Linux) oder Umschalttaste Wahltaste Abwärtspfeil (MacOS) verwenden.
Knoten-Screenshot erstellen
Mit Screenshot aufnehmen können Sie einen Screenshot von jedem einzelnen Knoten in der DOM-Struktur erstellen.
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ü Screenshot des Knotens erstellen aus.
Der Screenshot wird in deinen Downloads gespeichert.
DOM-Knoten neu anordnen
Ziehen Sie die Knoten, um sie neu anzuordnen.
Klicken Sie unten mit der rechten Maustaste auf Elvis Presley und wählen Sie Prüfen aus. Beachten Sie, dass dies das letzte Element in der Liste ist.
- Stevie Wonder
- 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 in Status wie :active
, :hover
, :focus
, :visited
und :focus-within
verbleiben.
Bewege den Mauszeiger unten über Der Herr der Fliegen. Die Hintergrundfarbe wird dann orange.
- Der Herr der Fliegen
- Straftaten und Strafen
- Moby Dick
Klicken Sie oben mit der rechten Maustaste auf Der 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 (Status erzwingen) aus. Wenn Sie diese Option nicht sehen, lesen Sie den Anhang: Fehlende Optionen. Die Hintergrundfarbe bleibt orange, auch wenn Sie die Maus nicht über den Knoten bewegen.
Knoten ausblenden
Drücken Sie H, um einen Knoten auszublenden.
Klicken Sie mit der rechten Maustaste unten auf The Stars My Destination und wählen Sie Inspect aus.
- Der Graf des Monte Cristo
- The Stars My Destination
Drücken Sie die H-Taste. 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 H-Taste. Der Knoten wird wieder angezeigt.
Knoten löschen
Drücken Sie Löschen, um einen Knoten zu löschen.
Klicken Sie unten mit der rechten Maustaste auf Grundlage und wählen Sie Prüfen aus.
- Der illustrierte Mann
- Durch den Blick
- Basis
Drücken Sie die Entf-Taste. 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.
Auf Knoten in der Console zugreifen
Die Entwicklertools bieten einige Tastenkombinationen, um über die Console auf DOM-Knoten zuzugreifen oder JavaScript-Referenzen darauf zu erhalten.
Mit $0 auf den aktuell ausgewählten Knoten 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 Seite der Dunkelheit und wählen Sie Untersuchen aus.
- Die linke Hand der Dunkelheit
- Dune
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 in der Konsole noch einmal$0
ein und drücken Sie die Eingabetaste noch einmal. 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 (Großer Schlaf) und wählen Sie Untersuchen aus.
- Der große Schlaf
- Langes Abschied
Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf
<li>The Big Sleep</li>
und wählen Sie Als globale Variable speichern aus. Wenn Sie diese Option nicht sehen, lesen Sie den Anhang: Fehlende Optionen.Geben Sie
temp1
in der Konsole ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks zeigt, dass die Variable für den Knoten ausgewertet wird.
JS-Pfad kopieren
Kopieren Sie den JavaScript-Pfad auf einen Knoten, wenn Sie in einem automatisierten Test darauf verweisen müssen.
Klicken Sie mit der rechten Maustaste unten auf The Brothers Karamazov und wählen Sie Untersuchen aus.
- Die Brüder Karamazov
- Straftaten 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 er das DOM ändert. Siehe Haltepunkte für DOM-Änderungen.
Nächste Schritte
Das deckt die meisten DOM-bezogenen Funktionen in den Entwicklertools ab. Die übrigen Elemente können Sie ermitteln, indem Sie mit der rechten Maustaste auf die Knoten in der DOM-Struktur klicken und mit den anderen Optionen experimentieren, die in dieser Anleitung nicht behandelt wurden. Weitere Informationen finden Sie unter Tastenkombinationen für das Steuerfeld "Elemente".
Auf der Startseite von Chrome DevTools finden Sie alles, was Sie noch alles mit den Entwicklertools machen können.
Wenn Sie das Entwicklertools-Team kontaktieren oder Hilfe von der Entwicklertools-Community erhalten möchten, rufen Sie den Community-Tab auf.
Anhang: HTML im Vergleich zum DOM
In diesem Abschnitt wird der Unterschied zwischen HTML und DOM kurz erläutert.
Wenn Sie eine Seite wie https://example.com
über einen Webbrowser anfordern, gibt der Server HTML-Code wie diesen 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 Objektstruktur wie die folgende:
html
head
title
body
h1
p
script
Diese Baumstruktur aus Objekten oder Knoten, die den Inhalt der Seite darstellt, wird DOM genannt. Im Moment sieht es genauso aus wie der HTML-Code, aber nehmen wir an, dass das Skript, auf das unten im HTML-Code 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);
Dieser Code entfernt den h1
-Knoten und fügt dem DOM einen weiteren p
-Knoten hinzu. Das vollständige DOM sieht nun so aus:
html
head
title
body
p
script
p
Der HTML-Code der Seite unterscheidet sich nun von ihrem DOM. Mit anderen Worten: HTML steht für den ursprünglichen Seiteninhalt und das DOM für den aktuellen Seiteninhalt. Wenn JavaScript Knoten hinzufügt, entfernt oder bearbeitet, unterscheidet sich das DOM vom HTML-Code.
Weitere Informationen finden Sie unter Einführung in das DOM.
Anhang: In Ansicht scrollen
Dies ist eine Fortsetzung des Abschnitts Zur Ansicht scrollen. Folgen Sie der Anleitung unten, um den Abschnitt abzuschließen.
- Der Knoten
<li>Magritte</li>
sollte weiterhin in der DOM-Struktur ausgewählt sein. Falls nicht, gehen Sie zurück zu In Ansicht scrollen und beginnen Sie noch einmal von vorn. Klicken Sie mit der rechten Maustaste auf den Knoten
<li>Magritte</li>
und wählen Sie In Ansicht scrollen aus. Der Darstellungsbereich scrollt wieder nach oben, sodass Sie den Magritte-Knoten sehen können. Falls die Option In Ansicht scrollen nicht angezeigt wird, finden Sie entsprechende Informationen im Anhang: Fehlende Optionen.
Anhang: Fehlende Optionen
In vielen Anleitungen 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 Kontextmenü auszuwählen, das eingeblendet wird. Wenn Sie die angegebene Option im Kontextmenü nicht sehen, klicken Sie mit der rechten Maustaste weg vom Knotentext.