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 DOM und HTML kennen. Eine Erklärung finden Sie im Anhang: HTML und das 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 in der DOM-Struktur 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 Ü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 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 in der DOM-Struktur 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 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 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 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. 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 + Umschalttaste + P oder Befehlstaste + Umschalt + 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 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.

    Suchanfrage in der Suchleiste markieren

Wie oben 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 der 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.

    • Braten
    • Michelle

  2. Doppelklicken Sie in der DOM-Struktur 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. „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

Wenn Sie Attribute bearbeiten möchten, doppelklicken Sie auf den Namen oder Wert des Attributs. 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 Prüfen aus.

    • Howard
    • Logo: 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 wird goldgelb.

    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

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.

    • 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 Knoten <li> wird in einen <button>-Knoten geändert.

    Knotentyp in „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 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ü für die automatische Vervollstä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 im Tag Sheldon ein und drücken Sie Strg / Befehlstaste + Eingabetaste, um die Änderungen zu übernehmen.

    Ä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 Prüfen 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. Der Listeneintrag 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 Informationen zum Erstellen von Screenshots mit den Entwicklertools finden Sie unter Vier Möglichkeiten zum Erstellen von Screenshots mit den Entwicklertools.

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 Prüfen 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 erzwingen, dass Knoten in Status wie :active, :hover, :focus, :visited und :focus-within verbleiben.

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

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

  2. Klicken Sie oben mit der rechten Maustaste auf Der Lord 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 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 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 die 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 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 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 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 ergibt $0 <li>Dune</li>.

    Das Ergebnis des zweiten Ausdrucks mit $0 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
    • The Long Goodbye

  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 die 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 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 Entwicklertools kannst du den JavaScript-Code einer Seite pausieren, wenn er 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 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 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 parst den HTML-Code und erstellt eine Objektstruktur wie die folgende:

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 nun 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 vom HTML-Code.

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 scrollt nach oben, 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