Erste Schritte zum Anzeigen und Ändern des DOM

Sehen Sie sich das Video an und absolvieren Sie diese interaktiven Tutorials, um die Grundlagen der das DOM einer Seite mithilfe der Chrome-Entwicklertools ändern.

In dieser Anleitung wird davon ausgegangen, dass Sie den Unterschied zwischen DOM und HTML kennen. Weitere Informationen finden Sie unter 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 du dich für einen bestimmten DOM-Knoten interessierst, kannst du mit Inspect schnell die Entwicklertools öffnen. und untersuchen diesen Knoten.

1. Klicken Sie unten mit der rechten Maustaste auf Michelangelo und wählen Sie Untersuchen aus.
   • Michelangelo
   • Raffael Der Bereich Elements in den Entwicklertools wird geöffnet. <li>Michelangelo</li> ist in der DOM-Struktur hervorgehoben.
2. Klicken Sie auf das Symbol Prüfen links oben Entwicklertools.

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 Ihren Tastatur.

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

   • George
   • Ringo
   • Paul

   • Max

     

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

   

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> ausgewählt ist. In diesem Fall ist es der Knoten <li> mit der Anleitung für Schritt 1.

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

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

In Ansicht scrollen

Bei der Anzeige der DOM-Baumstruktur interessieren Sie sich manchmal für einen DOM-Knoten, der sich derzeit nicht im Darstellungsbereich befindet. Angenommen, Sie haben im Fenster und Sie interessieren sich für den <h1>-Knoten oben auf der Seite. Zur 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
   • 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 Elements darauf bewegen.

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.
• Prüfen Sie die Einstellungen > Einstellungen > Elements > Lineal einblenden, wenn der Mauszeiger darauf bewegt wird.

Die Größeneinheit der Lineale sind Pixel.

Nach Knoten suchen

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

1. Bewegen Sie den Cursor auf den Bereich Elements.
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.

   

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

Im Steuerfeld Elements 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.

Löschen Sie die Einstellungen >, um unnötige Sprünge zwischen Knoten zu vermeiden. Einstellungen > Global > Suche während der Eingabe.

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.

   

3. „Michelle“ löschen, „Leela“ eingeben und dann die Eingabetaste drücken, um die Änderung zu bestätigen. Der Text von Michelle zu Leela.

Attribute bearbeiten

Um Attribute zu bearbeiten, doppelklicken Sie auf den Attributnamen oder -wert. Folge der Anleitung weiter 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, Knoten ausgewählt ist.

   

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

   

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

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
   • Thaddeus
   • 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> ändert sich in einen <button>. Knoten.

   

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
   • Rajesh
   • Leonard

2. Klicken Sie im Bereich Elements mit der rechten Maustaste auf den aktuellen Knoten und wählen Sie im Drop-down-Menü die Option Elements aus.

   

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.

   

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.

   

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

   

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 Elements mit der rechten Maustaste auf <li>Nana</li> und wählen Sie im Drop-down-Menü Elements aus.

   

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 Elements mit der rechten Maustaste auf die Bild-URL und wählen Sie im Drop-down-Menü Elements aus.

   

3. Der Screenshot wird in deinen 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 die Knoten, um sie neu anzuordnen.

1. Klicken Sie unten mit der rechten Maustaste auf Elvis Presley und wählen Sie Prüfen aus. Es ist das letzte Element, in der Liste.

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

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

   

Status erzwingen

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

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 Erzwingen Status > :hover verwenden. 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.

   

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
   • Stiftung

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 für den Zugriff auf DOM-Knoten über die Console oder auf sie verweist.

Mit $0 auf den aktuell ausgewählten Knoten verweisen

Wenn Sie einen Knoten prüfen, bedeutet der Text == $0 neben dem Knoten, dass Sie darauf verweisen können in der Konsole mit der Variablen $0.

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, $0 ergibt <li>The Left Hand of Darkness</li>.

   

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 dann Eingabetaste noch einmal eingeben. Jetzt wird $0 als <li>Dune</li> ausgewertet.

   

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 global speichern . 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 als Knoten ausgewertet wird.

   

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: Ein document.querySelector()-Ausdruck, der in den Knoten wurde in die Zwischenablage kopiert.

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

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

   

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 Beispiele finden Sie indem Sie mit der rechten Maustaste auf Knoten in der DOM-Struktur klicken und mit anderen Optionen experimentieren, die in dieser Anleitung behandelt werden. Weitere Informationen finden Sie unter Tastenkombinationen für das Steuerfeld "Elemente".

Auf der Startseite der Chrome-Entwicklertools finden Sie alles, was Sie benötigen. die Ihnen mit Entwicklertools zur Verfügung stehen.

Wenn du dich an das Entwicklertools-Team wenden möchtest, gehe zu Community. oder Hilfe von der Entwicklertools-Community erhalten.

Anhang: HTML im Vergleich zum DOM

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

Wenn du einen Webbrowser verwendest, um eine Seite wie https://example.com vom Server anzufordern gibt HTML-Code wie folgt 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 im unten im HTML-Code 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);

Dieser Code entfernt den h1-Knoten und fügt dem DOM einen weiteren p-Knoten hinzu. Das vollständige DOM sieht jetzt wie hier:

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 Anfangsseiteninhalt und das DOM repräsentiert den aktuellen Seiteninhalt. Wenn JavaScript Knoten hinzufügen, entfernen oder bearbeiten, 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 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 Scrollen Sie zur Ansicht und beginnen Sie von vorn.

2. Klicken Sie mit der rechten Maustaste auf den Knoten <li>Magritte</li> und wählen Sie In Ansicht scrollen aus. Ihr Darstellungsbereich scrollt sichern, damit Sie den Magritte-Knoten sehen können. Falls die Option In Ansicht scrollen nicht angezeigt wird, lesen Sie den Anhang: Fehlende Optionen.

   

Anhang: Fehlende Optionen

Viele Anweisungen in dieser Anleitung fordern Sie auf, mit der rechten Maustaste auf einen Knoten in der DOM-Struktur zu klicken. und wählen Sie dann eine Option aus dem Kontextmenü aus. Wenn Sie die angegebenen klicken Sie mit der rechten Maustaste weg vom Knotentext.