Erste Schritte zum Anzeigen und Ändern des DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Sehen Sie sich das Video an und führen Sie diese interaktiven Anleitungen aus, 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 dem DOM und HTML kennen. Eine Erklärung finden Sie im Anhang: HTML im Vergleich zum DOM.

DOM-Knoten ansehen

Im DOM-Baum des Bereichs Elemente können Sie alle DOM-bezogenen Aktivitäten in den DevTools ausführen.

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 unten mit der rechten Maustaste auf Michelangelo und wählen Sie Untersuchen aus.
    • Michelangelo
    • Raphael Knoten prüfen Der Bereich Elemente in den DevTools wird geöffnet. <li>Michelangelo</li> ist im DOM-Baum hervorgehoben. Michelangelo<-Knoten hervorheben
  2. Klicken Sie links oben in den DevTools auf das Symbol Inspect (Prüfen). Symbol „Prüfen“

  3. Klicke unten auf den Text Tokio.

    • Tokio

    • Beirut

      Jetzt ist <li>Tokyo</li> im DOM-Baum hervorgehoben.

Die Prüfung eines Knotens ist auch der erste Schritt, um die Stile eines Knotens aufzurufen und zu ändern. Weitere Informationen finden Sie unter Erste Schritte mit dem Ansehen und Ändern von CSS.

Mit der Tastatur durch den DOM-Baum navigieren

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

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

    • George
    • Ringo
    • Paul

    • Max

      Ringo-Knoten prüfen

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

    ul-Knoten prüfen

  3. Drücken Sie die Linkspfeiltaste. Die Liste <ul> wird minimiert.

  4. Drücken Sie noch einmal die Linkspfeiltaste. 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 auf den Abwärtspfeil , um die Liste <ul>, die Sie gerade minimiert haben, wieder auszuwählen. Er sollte so aussehen: <ul>...</ul>

  6. Drücken Sie die Rechtspfeiltaste. Die Liste wird maximiert.

In die Ansicht hineinscrollen

Wenn Sie sich den DOM-Baum ansehen, sind Sie manchmal an einem DOM-Knoten interessiert, der sich derzeit nicht im Darstellungsbereich befindet. Angenommen, Sie haben zum Ende der Seite gescrollt und möchten den Knoten <h1> oben auf der Seite aufrufen. Mit In Sichtweite scrollen können Sie den Ansichtsbereich schnell so neu positionieren, dass der Knoten sichtbar ist.

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

    • Magritte
    • Soutine

  2. Weitere Informationen finden Sie unten auf dieser Seite im Abschnitt Anhang: In den Blick rücken. Die Anleitung geht dort weiter.

Nachdem Sie die Anleitung unten auf der Seite ausgeführt haben, kehren Sie hierher zurück.

Führungslinien anzeigen

Mit den Linealen über und links vom Darstellungsbereich können Sie die Breite und Höhe eines Elements messen, indem Sie im Bereich Elemente den Mauszeiger darauf bewegen.

Lineale

Sie haben zwei Möglichkeiten, die Lineale 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 auf Einstellungen > Einstellungen > Elemente > Lineale beim Bewegen des Mauszeigers anzeigen.

Die Maßeinheit der Lineale ist Pixel.

Sie können im DOM-Baum nach String, CSS-Selektor oder XPath-Selektor suchen.

  1. Bewegen Sie den Mauszeiger auf den Bereich Elemente.
  2. Drücken Sie Strg + F oder 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.

    Abfrage in der Suchleiste markieren

Wie bereits erwähnt, werden in der Suchleiste auch CSS- und XPath-Selektoren unterstützt.

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

Entfernen Sie das Häkchen aus dem Kästchen Einstellungen > Einstellungen > Global > Bei Eingabe suchen, um unnötige Sprünge zwischen Knoten zu vermeiden.

In den Einstellungen das Kästchen „Suche beim Eingeben löschen“ deaktivieren

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, doppelklicken Sie im DOM-Baum darauf.

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

    • Frittieren
    • Michelle

  2. Doppelklicken Sie im DOM-Baum auf Michelle. Klicken Sie also doppelt auf den Text zwischen <li> und </li>. Der Text ist 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 Text oben ändert sich von Michelle zu Leela.

Attribute bearbeiten

Wenn Sie Attribute bearbeiten möchten, doppelklicken Sie auf den Namen oder Wert des Attributs. Folgen Sie der Anleitung unten, um einem Knoten Attribute hinzuzufügen.

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

    • Howard
    • Vince

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

    Knoten bearbeiten

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

    Dem Knoten ein Stilattribut hinzufügen

Sie können auch mit der rechten Maustaste auf Attribut bearbeiten klicken.

Klicken Sie mit der rechten Maustaste auf Optionen, bei denen das Attribut „Bearbeiten“ markiert ist.

Knotentyp bearbeiten

Wenn Sie den Typ eines Knotens bearbeiten möchten, klicken Sie doppelt darauf und geben Sie dann den neuen Typ ein.

  1. Klicken Sie unten mit der rechten Maustaste auf Hank und wählen Sie Inspect (Prüfen) 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.

    Knotentyp in „Schaltfläche“ ändern

Als HTML bearbeiten

Wenn Sie Knoten als HTML-Code mit Syntaxhervorhebung und automatischer Vervollständigung bearbeiten möchten, 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 Prüfen 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ü 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 <l ein. DevTool hebt die HTML-Syntax hervor und vervollständigt Tags automatisch.

    Automatische Vervollständigung von HTML-Tags

  4. Wählen Sie im Menü „Autocomplete“ (Autovervollständigung) das Element li aus und geben Sie > ein. In den DevTools wird das schließende </li>-Tag automatisch nach dem Cursor eingefügt.

    In DevTools wird das Tag automatisch geschlossen.

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

    Änderungen werden übernommen.

Knoten duplizieren

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

  1. Klicken Sie unten mit der rechten Maustaste 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.

    Die Option „Element duplizieren“ ist im Drop-down-Menü hervorgehoben.

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

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

Knoten-Screenshot aufnehmen

Mit Knoten-Screenshot aufnehmen können Sie einen Screenshot eines einzelnen Knotens im DOM-Baum erstellen.

  1. Klicken Sie mit der rechten Maustaste auf ein 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 erfassen aus.

    Ein Knoten-Screenshot wird aufgenommen.

  3. Der Screenshot wird in Ihren Downloads gespeichert.

    Screenshot des Knotens in „Downloads“ gespeichert.

Weitere Möglichkeiten zum Erstellen von Screenshots mit den Entwicklertools finden Sie unter Vier Möglichkeiten, Screenshots mit den Entwicklertools zu erstellen.

DOM-Knoten neu anordnen

Ziehen Sie Knoten, um sie neu anzuordnen.

  1. Klicken Sie unten mit der rechten Maustaste auf Elvis Presley und wählen Sie Untersuchen aus. Beachten Sie, dass dies das letzte Element in der Liste ist.

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

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

    Ziehen Sie den Knoten an den Anfang der Liste.

Status erzwingen

Sie können Knoten zwingen, in Status wie :active, :hover, :focus, :visited und :focus-within zu bleiben.

  1. Bewege den Mauszeiger unten auf Der Herr der Fliegen. Die Hintergrundfarbe wird orange.

    • Der Lord der Fliegen
    • Verbrechen und Strafe
    • Moby Dick

  2. Klicken Sie oben mit der rechten Maustaste auf Der Herr der Fliegen und wählen Sie Prüfen 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 Anhang: Fehlende Optionen. Die Hintergrundfarbe bleibt orange, auch wenn Sie den Mauszeiger nicht auf den Knoten bewegen.

Knoten ausblenden

Drücken Sie H, um einen Knoten auszublenden.

  1. Klicken Sie unten mit der rechten Maustaste auf The Stars My Destination und wählen Sie Inspect (Prüfen) aus.

    • Der Graf von Monte Christo
    • 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 im DOM-Baum aus, nachdem er ausgeblendet wurde

  3. Drücken Sie noch einmal die Taste H. 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 Grundlagen und wählen Sie Prüfen aus.

    • The Illustrated Man
    • Alice im Spiegelland
    • Stiftung

  2. Drücken Sie die Taste Löschen. 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 Befehlstaste + Z (Mac). Die letzte Aktion wird rückgängig gemacht und der Knoten wird wieder angezeigt.

Auf Knoten in der Console zugreifen

In den DevTools gibt es einige Tastenkürzel, mit denen Sie über die Console auf DOM-Knoten zugreifen oder JavaScript-Referenzen dazu abrufen können.

Den aktuell ausgewählten Knoten mit „0“ verknüpfen

Wenn Sie einen Knoten untersuchen, bedeutet der Text == $0 neben dem Knoten, dass Sie auf diesen Knoten in der Console mit der Variablen $0 verweisen können.

  1. Klicken Sie unten mit der rechten Maustaste auf The Left Hand of Darkness (Die linke Hand der Dunkelheit) und wählen Sie Inspect (Prüfen) aus.

    • Die linke Hand der Dunkelheit
    • Dune

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

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

    Das Ergebnis des ersten Ausdrucks mit „0“ in der Console

  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 in der Konsole noch einmal $0 ein und drücken Sie dann noch einmal die Eingabetaste. Jetzt ergibt $0 <li>Dune</li>.

    Das Ergebnis des zweiten $0-Ausdrucks in der Console

Als globale Variable speichern

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

  1. Klicken Sie unten mit der rechten Maustaste auf The Big Sleep und wählen Sie Inspect (Prüfen) aus.

    • Der große Schlaf
    • The Long Goodbye

  2. Klicken Sie im DOM-Baum 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 die Konsole ein und drücken Sie die Eingabetaste. Das Ergebnis des Ausdrucks zeigt, dass die Variable den Knoten ergibt.

    Das Ergebnis des Ausdrucks „temp1“

JS-Pfad kopieren

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

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

    • Die Brüder Karamasow
    • Verbrechen und Strafe

  2. Klicken Sie im DOM-Baum mit der rechten Maustaste auf <li>The Brothers Karamazov</li> und wählen Sie Kopieren > JS-Pfad kopieren aus. Ein document.querySelector()-Ausdruck, der auf den Knoten verweist, wurde in die Zwischenablage kopiert.

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

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

    Das Ergebnis des Ausdrucks „JS-Pfad kopieren“

Bei DOM-Änderungen pausieren

Mit den DevTools können Sie das JavaScript einer Seite pausieren, wenn es das DOM ändert. Weitere Informationen finden Sie unter DOM-Änderungs-Breakpoints.

Nächste Schritte

Das deckt die meisten DOM-bezogenen Funktionen in DevTools ab. Sie können die restlichen Funktionen entdecken, indem Sie im DOM-Baum mit der rechten Maustaste auf Knoten klicken und mit den anderen Optionen experimentieren, die in diesem Tutorial nicht behandelt wurden. Weitere Informationen finden Sie unter Tastenkombinationen für den Bereich „Elemente“.

Auf der Startseite der Chrome DevTools finden Sie weitere Informationen zu den Funktionen der DevTools.

Unter Community können Sie sich an das DevTools-Team wenden oder Hilfe von der DevTools-Community erhalten.

Anhang: HTML und das DOM

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

Wenn Sie mit einem Webbrowser eine Seite wie https://example.com anfordern, gibt der Server folgende HTML-Datei 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 den HTML-Code und erstellt einen Objektbaum wie diesen:

html
  head
    title
  body
    h1
    p
    script

Dieser Baum von Objekten oder Knoten, der den Inhalt der Seite darstellt, wird als DOM bezeichnet. Derzeit sieht es genauso aus wie der HTML-Code. Angenommen, das Script, auf das unten im HTML-Code verwiesen wird, führt diesen Code aus:

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

Das HTML der Seite unterscheidet sich jetzt 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 von der HTML-Datei.

Weitere Informationen finden Sie unter Einführung in das DOM.

Anhang: In die Ansicht hineinscrollen

Dieser Abschnitt ist eine Fortsetzung des Abschnitts In den Blick rücken. Folgen Sie der Anleitung unten, um den Abschnitt abzuschließen.

  1. Der Knoten <li>Magritte</li> sollte weiterhin in Ihrem DOM-Baum ausgewählt sein. Wenn nicht, kehren Sie zu In den Blick rücken 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 den Blickbereich scrollen aus. Der Ansichtsbereich wird nach oben gescrollt, sodass Sie den Knoten Magritte sehen können. Wenn die Option In den Blickbereich scrollen nicht angezeigt wird, lesen Sie den Anhang: Fehlende Optionen.

    In die Ansicht hineinscrollen

Anhang: Fehlende Optionen

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

Wo Sie klicken müssen, wenn nicht alle Optionen angezeigt werden