Erste Schritte zum Anzeigen und Ändern des DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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.

  1. Klicken Sie unten mit der rechten Maustaste auf Michelangelo und wählen Sie Untersuchen aus.
    • Michelangelo
    • Raphael Knoten prüfen Der Bereich Elemente in den Entwicklertools wird geöffnet. <li>Michelangelo</li> ist in der DOM-Baumstruktur hervorgehoben. Den Michelangelo-Knoten markieren
  2. Klicken Sie oben links in den Entwicklertools auf das Symbol Inspect (Prüfen). Das Symbol „Inspect“

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

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

      Ringo-Knoten prüfen

  2. Drücken Sie zweimal den Aufwärtspfeil. <ul> ist ausgewählt.

    ul-Knoten prüfen

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

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

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

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

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

    • Magritte
    • Soutine

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

Lineale.

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 > Einstellungen > Elemente > Lineal einblenden, wenn der Mauszeiger darauf bewegt wird.

Die Größeneinheit der Lineale sind Pixel.

Sie können die DOM-Struktur nach String, CSS-Selektor oder XPath-Selektor durchsuchen.

  1. Bewegen Sie den Cursor auf den Bereich Elemente.
  2. Drücken Sie Strg + F oder die Befehlstaste + F (Mac). 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.

    Suchanfrage in der Suchleiste markieren

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 > Einstellungen > Global > Suche während der Eingabe, um unnötige Sprünge zwischen Knoten zu vermeiden.

Das Kontrollkästchen &quot;Suche während der Eingabe&quot; in den Einstellungen wurde entfernt.

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.

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

    • Braten
    • Michelle

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

    Text bearbeiten

  3. „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.

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

    • Howard
    • Logo: Vince

  2. Doppelklicken Sie auf <li>. Der Text wird hervorgehoben, um anzuzeigen, dass der Knoten ausgewählt ist.

    Knoten bearbeiten

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

    Dem Knoten ein Stilattribut hinzufügen

Sie können auch die Option Attribut bearbeiten mit der rechten Maustaste verwenden.

Klicken Sie mit der rechten Maustaste auf die Optionen. „Attribut bearbeiten“ ist markiert.

Knotentyp bearbeiten

Um den Typ eines Knotens zu bearbeiten, doppelklicken Sie auf den Typ und geben Sie dann den neuen Typ ein.

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

    • Dekan
    • Hank
    • Thaddäus
    • Brock

  2. Doppelklicken Sie auf <li>. Der Text „li“ ist markiert.

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

    Knotentyp zu Schaltfläche ändern

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.

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

    • Penny
    • Howard
    • Rafael
    • 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.

    Das Drop-down-Menü eines Knotens.

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

    Automatische Vervollständigung von HTML-Tags.

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

    Die Entwicklertools schließen das Tag automatisch.

  5. Geben Sie im Tag Sheldon ein und drücken Sie Strg / Befehlstaste + Eingabetaste, um die Änderungen zu übernehmen.

    Änderungen werden übernommen.

Knoten duplizieren

Mit der Rechtsklickoption Element duplizieren können Sie ein Element duplizieren.

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

    • Lagerfeuer der Waschtische
    • 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.

    Im Drop-down-Menü ist die Option „Element duplizieren“ markiert.

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

  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ü Screenshot des Knotens erstellen aus.

    Ein Knoten-Screenshot wird erstellt.

  3. Der Screenshot wird in deinen Downloads gespeichert.

    Knoten-Screenshot wurde in Downloads gespeichert.

DOM-Knoten neu anordnen

Ziehen Sie die Knoten, um sie neu anzuordnen.

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

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

    Den Knoten an den Anfang der Liste ziehen

Status erzwingen

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

  1. Bewege den Mauszeiger unten über Der Herr der Fliegen. Die Hintergrundfarbe wird dann orange.

    • Der Herr der Fliegen
    • Straftaten und Strafen
    • Moby Dick

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

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

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

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

    So sieht der Knoten nach dem Ausblenden in der DOM-Struktur aus

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

  1. Klicken Sie unten mit der rechten Maustaste auf Grundlage und wählen Sie Prüfen aus.

    • Der illustrierte Mann
    • Durch den Blick
    • Basis

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

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

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

  2. Drücken Sie die Esc-Taste, um die Konsolenleiste zu öffnen.

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

    Das Ergebnis des ersten $0-Ausdrucks in der Console

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

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

    Das Ergebnis des zweiten $0-Ausdrucks in der Console

Als globale Variable speichern

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

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

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

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

    Das Ergebnis des temp1-Ausdrucks

JS-Pfad kopieren

Kopieren Sie den JavaScript-Pfad auf einen Knoten, wenn Sie in einem automatisierten Test darauf verweisen müssen.

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

    • Die Brüder Karamazov
    • Straftaten und Strafen

  2. 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. 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 (Mac), um den Ausdruck in die Konsole einzufügen.

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

    Das Ergebnis des Ausdrucks „Copy JS Path“

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.

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

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

    In Ansicht scrollen

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.

Darauf klicken, wenn nicht alle Optionen angezeigt werden