Erste Schritte zum Anzeigen und Ändern des DOM

Kayce Basken
Kayce Basken
Sofia Emelianova
Sofia Emelianova

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.

  1. Klicken Sie unten mit der rechten Maustaste auf Michelangelo und wählen Sie Untersuchen aus.
    • Michelangelo
    • Raphael Knoten prüfen Der Bereich Elemente der Entwicklertools wird geöffnet. <li>Michelangelo</li> ist in der DOM-Baumstruktur hervorgehoben. Hervorhebung des Knotens Michelangelo
  2. Klicken Sie oben links in den Entwicklertools auf das Symbol Untersuchen. Das Symbol „Untersuchen“
  3. 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.

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

      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 das der Knoten <li> mit den Anweisungen für Schritt 1.

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

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

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

    • Magritte
    • Soutina
  2. 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.

Herrscher.

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

Die Größeneinheit der Lineale ist Pixel.

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

  1. Setzen Sie den Cursor auf das Steuerfeld Elemente.
  2. Drücken Sie Strg + F oder die Befehlstaste + F (Mac). Die Suchleiste wird unten in der DOM-Baumstruktur geöffnet.
  3. Geben Sie The Moon is a Harsh Mistress ein. Der letzte Satz wird in der DOM-Baumstruktur hervorgehoben.

    Suchanfrage in der Suchleiste hervorheben

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

Der Inhalt des Kästchens „Suche bei der Eingabe“ in den Einstellungen wurde entfernt.

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.

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

    • Braten
    • Michelle
  2. 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.

    Text bearbeiten

  3. Löschen Sie Michelle, geben Sie Leela 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.

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

    • Howard
    • 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 hinzu, geben Sie style="background-color:gold" ein und drücken Sie 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.

Optionen für den Rechtsklick; Attribut bearbeiten ist markiert.

Knotentyp bearbeiten

Doppelklicken Sie auf den Typ eines Knotens, um ihn zu bearbeiten, 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 hervorgehoben.

  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 in Schaltfläche ändern

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.

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

    • Penny
    • Howard
    • Rajesh
    • Leonard
  2. 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.

    Das Drop-down-Menü eines Knotens.

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

    Automatische Vervollständigung von HTML-Tags.

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

    In den Entwicklertools wird das Tag automatisch geschlossen.

  5. Geben Sie Sheldon innerhalb des Tags ein und drücken Sie Strg / Cmd + Eingabetaste, um die Änderungen zu übernehmen.

    Änderungen werden übernommen.

Knoten duplizieren

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

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

    • Feuer der Eitelkeiten
    • Nana
    • Orlando
    • Weißes Rauschen
  2. Klicken Sie im Steuerfeld 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. 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.

  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.

    Knoten-Screenshot wird aufgenommen.

  3. Der Screenshot wird in deinen Downloads gespeichert.

    Screenshot des Knotens in Downloads gespeichert.

DOM-Knoten neu anordnen

Ziehen Sie Knoten, um sie neu anzuordnen.

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

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

    Knoten an den Anfang der Liste ziehen

Status erzwingen

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

  1. Bewegen Sie den Mauszeiger unten über Herr der Fliegen. Die Hintergrundfarbe wird orange.

    • Der Herr der Fliegen
    • Verbrechen und Strafen
    • Moby

  2. Klicken Sie mit der rechten Maustaste oben auf 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 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.

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

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

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

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

    • Der illustrierte Mann
    • Durch den Blick
    • Basis
  2. 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.

  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.

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.

  1. 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
  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 $0 noch einmal in der Console ein und drücken Sie noch einmal die Eingabetaste. 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 und wählen Sie Untersuchen aus.

    • Der große Schlaf
    • Der Lange Abschied
  2. 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.

  3. Geben Sie temp1 in die Console ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks zeigt, dass die Variable den Knoten ergibt.

    Ergebnis des Ausdrucks temp1

JS-Pfad kopieren

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

  1. 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
  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 „JS-Pfad kopieren“

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.

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

    In die Ansicht scrollen

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.

Worauf Sie klicken können, wenn nicht alle Optionen angezeigt werden