Erste Schritte zum Anzeigen und Ändern des DOM

Kayce Basques

Sofia Emelianova

Sehen Sie sich das Video an und absolvieren Sie diese interaktiven Tutorials, um die Grundlagen zum Aufrufen und Ändern des DOM einer Seite mit den Chrome-Entwicklertools zu erlernen.

In dieser Anleitung wird davon ausgegangen, dass Sie den Unterschied zwischen DOM und HTML kennen. Eine Auffrischung finden Sie im Anhang: HTML im Vergleich zum DOM.

DOM-Knoten ansehen

Im DOM-Baum des Bereichs Elemente führen Sie alle DOM-bezogenen Aktivitäten in DevTools aus.

Knoten prüfen

Wenn Sie sich für einen bestimmten DOM-Knoten interessieren, können Sie mit Prüfen schnell die DevTools öffnen und diesen Knoten untersuchen.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Michelangelo. Wählen Sie im Menü die Option Untersuchen aus.

   • Michelangelo
   • Raphael

   Das Steuerfeld Elemente der Entwicklertools wird geöffnet. <li>Michelangelo</li> wird im DOM-Baum hervorgehoben.

   

2. Klicken Sie auf  Element auswählen.

3. Wählen Sie Tokyo aus der folgenden Liste aus.

   • Tokio
   • Beirut

   <li>Tokyo</li> wird im DOM-Baum hervorgehoben.

Das Prüfen eines Knotens ist auch der erste Schritt, um die Stile und das CSS eines Knotens aufzurufen und zu ändern.

Mit der Tastatur im DOM-Baum navigieren

Nachdem Sie einen Knoten im DOM-Baum ausgewählt haben, können Sie mit der Tastatur im DOM-Baum navigieren.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Ringo und wählen Sie Untersuchen aus. <li>Ringo</li> ist im DOM-Baum ausgewählt.

   • George
   • Ringo
   • Paul

   • John

     

2. Drücken Sie zweimal die Aufwärtspfeiltaste. <ul> ist ausgewählt.

   

3. Drücken Sie den Linkspfeil. Die Liste <ul> wird minimiert.

4. Drücke noch einmal die Linkspfeiltaste. Das übergeordnete Element des Knotens <ul> ist ausgewählt. In diesem Fall ist es der <li>-Knoten, der die Anleitung für Schritt 1 enthält.

5. Drücken Sie dreimal die Abwärtspfeiltaste, um die gerade minimierte Liste <ul> wieder auszuwählen. Das sollte so aussehen: <ul>...</ul>

6. Drücken Sie den Rechtspfeil. Die Liste wird maximiert.

In die Ansicht hineinscrollen

Wenn Sie sich den DOM-Baum ansehen, befinden Sie sich manchmal in einem DOM-Knoten, der nicht im Darstellungsbereich liegt. Angenommen, Sie sind bis zum Ende der Seite gescrollt und möchten sich den <h1>-Knoten oben auf der Seite ansehen. Mit In Ansicht scrollen können Sie den Darstellungsbereich schnell neu positionieren, um den Knoten zu sehen.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Magritte und wählen Sie Untersuchen aus.

   • Magritte
   • Soutine

2. Weitere Informationen finden Sie im Abschnitt In Ansicht scrollen im Anhang.

Wenn Sie fertig sind, kehren Sie zu diesem Abschnitt zurück.

Führungslinien anzeigen

Wenn Sie im Bereich Elemente den Mauszeiger auf ein Element bewegen, können Sie mit den Linealen im Darstellungsbereich die Breite und Höhe des Elements messen.

Sie haben zwei Möglichkeiten, die Lineale zu aktivieren:

• Drücken Sie Strg + Umschalt + P oder Befehlstaste + Umschalt + P (macOS), um das Befehlsmenü zu öffnen, geben Sie Show rulers on hover ein und drücken Sie die Eingabetaste.
• Prüfen Sie die Einstellungen: Einstellungen > Einstellungen > Elemente > Lineale beim Bewegen des Mauszeigers einblenden.

Die Maßeinheit der Lineale ist Pixel.

Nach Knoten suchen

Sie können den DOM-Baum nach String, CSS-Selektor oder XPath-Selektor durchsuchen.

1. Bewegen Sie den Cursor auf den Bereich Elemente.
2. Drücken Sie Strg + F oder Befehlstaste + F (macOS). Die Suchleiste wird unten im DOM-Baum geöffnet.

3. Geben Sie The Moon is a Harsh Mistress ein. Der letzte Satz ist im DOM-Baum hervorgehoben.

   

Die Suchleiste unterstützt auch CSS- und XPath-Selektoren.

Im Bereich Elemente wird das erste übereinstimmende Ergebnis im DOM-Baum ausgewählt und im Darstellungsbereich angezeigt. Standardmäßig geschieht dies während der Eingabe. Wenn Sie immer mit langen Suchanfragen arbeiten, können Sie die DevTools so einstellen, dass die Suche nur ausgeführt wird, wenn Sie die Eingabetaste drücken.

Um unnötige Sprünge zwischen Knoten zu vermeiden, deaktivieren Sie das Kästchen Einstellungen > Einstellungen > Einstellungen > Global > Suchvorschläge während der Eingabe.

DOM bearbeiten

Sie können das DOM spontan bearbeiten und sehen, wie sich die Änderungen auf die Seite auswirken.

Inhalte bearbeiten

Wenn Sie den Inhalt eines Knotens bearbeiten möchten, doppelklicken Sie im DOM-Baum auf den Inhalt.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Michelle und wählen Sie Untersuchen aus.

   • Fry
   • Michaela

2. Doppelklicken Sie im DOM-Baum auf Michelle. Doppelklicken Sie also auf den Text zwischen <li> und </li>. Der Text wird blau hervorgehoben, um anzuzeigen, dass er ausgewählt ist.

   

3. Löschen Sie Michelle, geben Sie Leela ein und drücken Sie dann die Eingabetaste, um die Änderung zu bestätigen. Der Text ändert sich von Michelle zu Leela.

Attribute bearbeiten

Doppelklicken Sie auf den Attributnamen oder -wert, um Attribute zu bearbeiten. Folgen Sie dieser Anleitung, um zu erfahren, wie Sie einem Knoten Attribute hinzufügen.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Howard und wählen Sie Untersuchen aus.

   • Howard
   • Vince

2. Maximieren Sie <ul> und doppelklicken Sie dann auf <li>, um die Datei zu bearbeiten. Der Text wird hervorgehoben, um anzuzeigen, dass der Knoten ausgewählt ist.

   

3. Drücken Sie den Rechtspfeil, fügen Sie ein Leerzeichen ein, geben Sie style="background-color:gold" ein und drücken Sie die Eingabetaste. Die Hintergrundfarbe des Knotens ändert sich in Gold.

   

Knotentyp bearbeiten

Wenn Sie den Typ eines Knotens bearbeiten möchten, doppelklicken Sie auf den Typ und geben Sie den neuen Typ ein.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Hank und wählen Sie Untersuchen aus.

   • Dean
   • Hank
   • Thaddeus
   • Brock

2. Doppelklicken Sie auf <li>. Der Text li ist hervorgehoben.

3. Löschen Sie li, geben Sie button ein und drücken Sie die Eingabetaste. Der <li>-Knoten wird in einen <button>-Knoten geändert.

   

Als HTML bearbeiten

Wenn Sie Knoten als HTML mit Syntaxhervorhebung und automatischer Vervollständigung bearbeiten möchten, wählen Sie im Drop-down-Menü des Knotens Als HTML bearbeiten aus.

1. Klicken Sie unten mit der rechten Maustaste auf Leonard und wählen Sie Untersuchen aus.

   • Penny
   • Howard
   • Rajesh
   • Leonard

2. 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.

   

3. Drücken Sie die Eingabetaste, um eine neue Zeile zu beginnen, und geben Sie <l ein. DevTools hebt die HTML-Syntax hervor und schlägt Tags für die automatische Vervollständigung vor.

   

4. Wählen Sie das Element li aus dem Menü zur automatischen Vervollständigung aus und geben Sie > ein. DevTools fügt das schließende </li>-Tag automatisch nach dem Cursor ein.

   

5. Geben Sie Sheldon in das Tag ein und drücken Sie Strg oder Befehl + Eingabetaste, um die Änderungen zu übernehmen.

Knoten duplizieren

Sie können ein Element duplizieren, indem Sie mit der rechten Maustaste auf das Element klicken und Element duplizieren auswählen.

1. Rechtsklicken Sie in der folgenden Liste auf Nana und wählen Sie Untersuchen aus.

   • Bonfire of the Vanities
   • Nana
   • Orlando
   • Weißes Rauschen

2. Klicken Sie im Bereich Elemente mit der rechten Maustaste auf <li>Nana</li> und wählen Sie im Drop-down-Menü Element duplizieren aus.

   

3. Kehren Sie zur Seite zurück. Das Listenelement wurde dupliziert.

Sie können auch die Tastenkombinationen Umschalttaste + Alt + Abwärtspfeil (Windows und Linux) und Umschalttaste + Wahltaste + Abwärtspfeil (macOS) verwenden.

Knoten-Screenshot aufnehmen

Sie können von jedem einzelnen Knoten im DOM-Baum einen Screenshot erstellen.

1. Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild auf dieser Seite und wählen Sie Untersuchen aus.

2. 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.

   

3. Der Screenshot wird in Ihren Downloads gespeichert (Windows und macOS).

Weitere Informationen

DOM-Knoten neu anordnen

Knoten durch Ziehen neu anordnen

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Elvis Presley und wählen Sie Untersuchen aus. Es ist das letzte Element in der Liste.

   • Stevie Wonder
   • Tom Waits
   • Chris Thile
   • Elvis Presley

2. Ziehen Sie <li>Elvis Presley</li> im DOM-Baum an den Anfang der Liste.

Status erzwingen

Sie können erzwingen, dass Knoten in Status wie :active, :hover, :focus, :visited und :focus-within verbleiben.

1. Bewegen Sie den Mauszeiger auf den Listeneintrag Herr der Fliegen. Die Hintergrundfarbe wird orange.

   • Herr der Fliegen
   • Verbrechen und Strafe
   • Moby Dick

2. Klicken Sie mit der rechten Maustaste auf das Listenelement Herr der Fliegen und wählen Sie Untersuchen aus.

3. Rechtsklicken Sie auf <li class="demo--hover">The Lord of the Flies</li> und wählen Sie Status erzwingen > :hover aus. Wenn Sie diese Option nicht sehen, lesen Sie den Anhang zu fehlenden Optionen.

   Die Hintergrundfarbe bleibt orange, obwohl Sie den Mauszeiger nicht mehr auf dem Knoten haben.

Knoten ausblenden

Drücken Sie H, um einen Knoten auszublenden.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf The Stars My Destination und wählen Sie Untersuchen aus.

   • Der Graf von Monte Christo
   • Die Sterne sind das Ziel

2. Drücken Sie die Taste H. Der Knoten ist ausgeblendet. Sie können auch den Knoten rechtsklicken und die Option Element ausblenden verwenden.

   

3. Drücken Sie die Taste H noch einmal. Der Knoten wird wieder angezeigt.

Knoten löschen

Drücken Sie Löschen, um einen Knoten zu löschen.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Foundation und wählen Sie Untersuchen aus.

   • The Illustrated Man
   • Hinter dem Spiegel
   • Basis

2. Drücken Sie die Taste Löschen. Der Knoten wird gelöscht. Sie können den Knoten auch rechtsklicken und die Option Element löschen verwenden.

3. Drücken Sie Strg + Z oder Befehlstaste + Z (macOS). Die letzte Aktion wird rückgängig gemacht und der Knoten wird wieder angezeigt.

Auf Knoten in der Console zugreifen

DevTools bietet einige Tastenkombinationen für den Zugriff auf DOM-Knoten über die Konsole oder zum Abrufen von JavaScript-Referenzen für diese Knoten.

Mit $0 auf den aktuell ausgewählten Knoten verweisen

Wenn Sie einen Knoten (einschließlich Pseudoelementen wie ::before oder ::after) prüfen, bedeutet der Text == $0 neben dem Knoten, dass Sie diesen Knoten in der Console mit der Variable $0 referenzieren können.

1. Klicken Sie mit der rechten Maustaste auf das Listenelement The Left Hand of Darkness und wählen Sie Untersuchen aus.

   • Die linke Hand der Dunkelheit
   • Dune

2. Drücken Sie die Esc-Taste, um die Konsolenschublade zu öffnen. Möglicherweise müssen Sie Konsole auswählen, um sie zu öffnen.

3. Geben Sie $0 ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks ist, dass $0 als <li>The Left Hand of Darkness</li> ausgewertet wird.

   

4. Bewegen Sie den Mauszeiger auf das Ergebnis. Der Knoten wird im Darstellungsbereich hervorgehoben.

5. Klicken Sie im DOM-Baum auf <li>Dune</li>, geben Sie noch einmal $0 in die Console ein und drücken Sie dann wieder die Eingabetaste. $0 wird jetzt als <li>Dune</li> ausgewertet.

   

Als globale Variable speichern

Wenn Sie häufig auf einen Knoten verweisen müssen, speichern Sie ihn als globale Variable.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf The Big Sleep und wählen Sie Untersuchen aus.

   • The Big Sleep
   • The Long Goodbye

2. Rechtsklicken Sie im DOM-Baum auf <li>The Big Sleep</li> und wählen Sie Als globale Variable speichern aus. Wenn Sie diese Option nicht finden, lesen Sie hier weiter.

3. Geben Sie temp1 in die Konsole ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks zeigt, dass die Variable zum Knoten ausgewertet wird. Klicken Sie auf den Knoten, um das Listenelement zu maximieren.

   

JS-Pfad kopieren

Kopieren Sie den JavaScript-Pfad zu einem Knoten, um ihn in einem automatisierten Test zu referenzieren.

1. Klicken Sie in der folgenden Liste mit der rechten Maustaste auf Die Brüder Karamasow und wählen Sie Untersuchen aus.

   • Die Brüder Karamasow
   • Verbrechen und Strafe

2. Rechtsklicken Sie im DOM-Baum auf <li>The Brothers Karamazov</li> und wählen Sie Kopieren > JS-Pfad kopieren aus. Ein document.querySelector()-Ausdruck, der in den Knoten aufgelöst wird, wurde in die Zwischenablage kopiert.

3. Drücken Sie Strg + V oder Befehlstaste + V (macOS), um den Ausdruck in die Console einzufügen.

4. Drücken Sie die Eingabetaste, um den Ausdruck auszuwerten.

   

Bei DOM-Änderungen unterbrechen

Mit den DevTools können Sie das JavaScript einer Seite pausieren, wenn es das DOM ändert. Informationen zu Haltepunkten für DOM-Änderungen

Nächste Schritte

Damit werden die meisten DOM-bezogenen Funktionen in DevTools abgedeckt. Die restlichen Optionen können Sie entdecken, indem Sie Knoten im DOM-Baum rechtsklicken und mit den Optionen experimentieren, die in dieser Anleitung nicht behandelt wurden.

Weiterlesen:

• Tastenkombinationen für das Bereich „Elemente“
• In der Entwicklertools-Dokumentation finden Sie weitere Informationen zu den Möglichkeiten, die die Entwicklertools bieten.

In der DevTools-Community können Sie das DevTools-Team kontaktieren oder Hilfe von anderen Entwicklern erhalten.

Anhang

Weitere Informationen zu bestimmten Themen.

HTML im Vergleich zum DOM

In diesem Abschnitt wird der Unterschied zwischen HTML und dem DOM kurz erläutert.

Wenn Sie mit einem Webbrowser eine Seite wie https://example.com anfordern, gibt der Server ein HTML-Dokument 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 analysiert das HTML und erstellt einen Baum von Objekten:

html
  head
    title
  body
    h1
    p
    script

Diese Baumstruktur aus Objekten oder Knoten stellt den Inhalt der Seite dar. Dies wird als Document Object Model oder kurz DOM bezeichnet. Derzeit sind die Objekte im DOM und im HTML-Code identisch.

Angenommen, die Datei script.js am Ende des HTML-Codes enthält die folgenden Funktionen:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Dieses Skript entfernt den h1-Knoten und fügt dem DOM einen weiteren p-Knoten hinzu. Das DOM sieht jetzt so aus:

html
  head
    title
  body
    p
    script
    p

Das HTML der Seite unterscheidet sich jetzt vom DOM.

HTML stellt den ursprünglichen Seiteninhalt dar und das DOM den aktiven, aktuellen Seiteninhalt. Wenn JavaScript Knoten hinzufügt, entfernt oder bearbeitet, unterscheidet sich das DOM vom HTML.

Weitere Informationen findest du in der Einführung in das DOM von MDN.

In die Ansicht hineinscrollen

Dies ist eine Fortsetzung des Abschnitts In Ansicht scrollen. Folgen Sie der Anleitung, um den Abschnitt abzuschließen.

1. Der Knoten <li>Magritte</li> sollte im DOM-Baum noch ausgewählt sein. Wenn nicht, kehren Sie zu Scroll into view zurück und beginnen Sie noch einmal.

2. Rechtsklicken Sie auf den Knoten <li>Magritte</li> und wählen Sie In Ansicht scrollen aus. Der Darstellungsbereich wird nach oben gescrollt, sodass Sie den Knoten Magritte sehen können. Wenn In Ansicht scrollen fehlt, finden Sie hier weitere Informationen.

   

Fehlende Optionen

In vielen Anleitungen in diesem Tutorial werden Sie aufgefordert, einen Knoten im DOM-Baum rechtszuklicken und dann eine Option aus dem angezeigten Kontextmenü auszuwählen. Wenn die angegebene Option nicht im Kontextmenü angezeigt wird, versuchen Sie, außerhalb des Knotentexts rechtszuklicken.