Erste Schritte beim Anzeigen und Ändern des DOM

  • Artikel

Um die Grundlagen des Anzeigens und Änderns des Dokumentobjektmodells (DOM ) einer Seite mit Microsoft Edge DevTools zu erlernen, folgen Sie diesen interaktiven Tutorialabschnitten.

Informationen zum Unterschied zwischen DOM und HTML finden Sie unten unter Anhang: HTML im Vergleich zum DOM.

Anzeigen von DOM-Knoten

In der DOM-Struktur des Elements-Tools können Sie alle DOM-bezogenen Aktivitäten in DevTools ausführen.

Untersuchen eines Knotens

Wenn Sie an einem bestimmten DOM-Knoten interessiert sind, ist Inspect eine schnelle Möglichkeit, DevTools zu öffnen und diesen Knoten zu untersuchen.

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte. (Um einen Link in einem neuen Fenster oder einer neuen Registerkarte zu öffnen, klicken Sie mit der rechten Maustaste auf den Link. Oder halten Sie STRG (Windows, Linux) oder Befehl (macOS) gedrückt, und klicken Sie dann auf den Link.)

  1. Klicken Sie auf der gerenderten Webseite unter Knoten überprüfen mit der rechten Maustaste auf Michelangelo , und wählen Sie dann Untersuchen aus:

    Untersuchen eines Knotens

    Das Tool Elemente von DevTools wird geöffnet. Der <p>Michelangelo</p> Knoten ist in der DOM-Struktur hervorgehoben:

    Hervorheben des Michelangelo-Knotens

  2. Klicken Sie in der linken oberen Ecke von DevTools auf das Symbol Untersuchen (Untersuchen):

    Das Symbol

  3. Klicken Sie unter Knoten überprüfen auf den Text Tokyo . <p>Tokyo</p> Jetzt ist der Knoten in der DOM-Struktur hervorgehoben.

Die Überprüfung eines Knotens ist auch der erste Schritt zum Anzeigen und Ändern der Stile eines Knotens. Weitere Informationen finden Sie unter Erste Schritte zum Anzeigen und Ändern von CSS.

Nachdem Sie einen Knoten in der DOM-Struktur ausgewählt haben, können Sie mit der Tastatur in der DOM-Struktur navigieren.

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Navigieren in der DOM-Struktur mit einer Tastatur mit der rechten Maustaste auf Ringo , und wählen Sie dann Untersuchen aus. <p>Ringo</p> ist in der DOM-Struktur ausgewählt:

    Überprüfen des Ringo-Knotens

  3. Drücken Sie zweimal die NACH-OBEN-TASTE . <div> ist ausgewählt:

    Überprüfen des

  4. Drücken Sie die NACH-LINKS-TASTE . Die <div> Liste wird reduziert.

  5. Drücken Sie erneut die NACH-LINKS-TASTE . Das übergeordnete Element des <div> Knotens ist ausgewählt. In diesem Fall ist es der , der <section> über die ID navigate-the-dom-tree-with-a-keyboard-1verfügt.

  6. Drücken Sie zweimal die NACH-UNTEN-TASTE , damit Sie die Liste, die <div> Sie gerade reduziert haben, erneut ausgewählt haben.

    Sie sollte wie folgt aussehen: <div>... </div>.

  7. Drücken Sie die NACH-RECHTS-TASTE . Die Liste wird erweitert.

Scrollen in die Ansicht

Wenn Sie die DOM-Struktur anzeigen, interessieren Sie sich möglicherweise für einen DOM-Knoten, der derzeit nicht auf der gerenderten Webseite sichtbar ist. Angenommen, Sie haben einen Bildlauf zum Ende der Seite ausgeführt und sind am Knoten oben auf der Seite interessiert <h1> . Mithilfe eines Bildlaufs in die Ansicht können Sie den Viewport schnell neu positionieren, sodass Sie den Knoten sehen können.

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter In Ansicht scrollen mit der rechten Maustaste auf Magritte , und wählen Sie dann Untersuchen aus.

  3. Scrollen Sie zum Ende der Seite DOM-Beispiele.

  4. Der <p>Magritte</p> Knoten sollte weiterhin in Ihrer DOM-Struktur ausgewählt sein. Wenn nicht, wechseln Sie zurück zu Bildlauf in die Ansicht , und beginnen Sie von vorne.

  5. Klicken Sie mit der rechten Maustaste auf den <p>Magritte</p> Knoten, und wählen Sie dann In ansicht scrollen aus:

    Scrollen in die Ansicht

    Ihr Viewport führt einen Bildlauf zurück nach oben durch, um den Magritte-Knoten anzuzeigen. Weitere Informationen finden Sie unter Anhang: Fehlende Optionen , wenn die Option In Ansicht scrollen nicht angezeigt wird.

Suchen nach Knoten

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

  1. Konzentrieren Sie den Cursor auf das Tool Elemente , z. B. durch Klicken auf die Registerkarte Elemente .

  2. Drücken Sie STRG+F (Windows, Linux) oder BEFEHL+F (macOS). Die Suchleiste wird unten in der DOM-Struktur geöffnet.

  3. Typ Der Mond ist eine harsche Herrin. Der letzte Satz ist in der DOM-Struktur hervorgehoben:

    Hervorheben der Abfrage in der Suchleiste

Die Suchleiste unterstützt auch CSS- und XPath-Selektoren.

Bearbeiten des DOM

Sie können das DOM in DevTools bearbeiten und in Echtzeit anzeigen, wie sich die Änderungen auf die Seite auswirken.

Bearbeiten von Textinhalten

Um den Textinhalt eines Knotens zu bearbeiten, doppelklicken Sie wie folgt auf den Inhalt in der DOM-Struktur:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Inhalt bearbeiten mit der rechten Maustaste auf Michelle , und wählen Sie dann Untersuchen aus.

  3. Doppelklicken Sie in der DOM-Struktur auf den Text Michellezwischen den <p> Tags und </p> . Der Text ist hervorgehoben, um anzugeben, dass er ausgewählt ist:

    Bearbeiten des Texts

  4. Löschen Sie Michelle, geben Sie ein Leela, und drücken Sie dann die EINGABETASTE , um die Änderung zu bestätigen. Der Text im DOM ändert sich von Michelle in Leela.

Bearbeiten oder Hinzufügen von Attributen

Um ein vorhandenes Attribut zu bearbeiten, doppelklicken Sie auf den Attributnamen oder -wert.

Um ein neues Attribut hinzuzufügen, doppelklicken Sie wie folgt auf das Element, für das ein Attribut hinzugefügt werden soll:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Attribute bearbeiten mit der rechten Maustaste auf Howard , und wählen Sie dann Untersuchen aus.

  3. Doppelklicken Sie auf <p>. Der Text ist hervorgehoben, um anzugeben, dass der Knoten ausgewählt ist:

    Bearbeiten des Knotens

  4. Drücken Sie die NACH-RECHTS-TASTE , fügen Sie ein Leerzeichen hinzu, geben Sie ein style="background-color:gold", und drücken Sie dann die EINGABETASTE. Die Hintergrundfarbe des Knotens ändert sich in Gold:

    Hinzufügen eines Formatattributs zum Knoten

Namen des Knotentags bearbeiten

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

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Knotentagnamen bearbeiten mit der rechten Maustaste auf Hank , und wählen Sie dann Untersuchen aus.

  3. Doppelklicken Sie auf <p>. Der Text p ist hervorgehoben.

  4. Löschen Sie p, geben Sie ein button, und drücken Sie dann die EINGABETASTE. Der <p> Knoten ändert sich in einen <button> Knoten:

    Ändern des Knotentyps in Schaltfläche

Bearbeiten mehrerer Knoten, Text und Attribute

Um den Tagnamen, den Textinhalt oder die Attribute mehrerer Knoten gleichzeitig zu ändern, können Sie einen Teil des DOM bearbeiten, indem Sie den HTML-Text-Editor der DOM-Struktur wie folgt verwenden:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite mit der rechten Maustaste in den Abschnitt Inhalt, Tagname und Attribute bearbeiten , und wählen Sie dann Untersuchen aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf den <section id="edit-as-html-1"> Knoten, und wählen Sie dann Als HTML bearbeiten aus. Der HTML-Editor wird in der DOM-Struktur mit einem Feld um den Abschnitt angezeigt, der bearbeitet wird:

    Der HTML-Editor

  4. Geben Sie die Änderungen ein, die Sie im HTML-Editor vornehmen möchten, z. B.:

    • Hinzufügen, Löschen oder Bearbeiten von Attributen.
    • Hinzufügen oder Löschen von Knoten.
    • Bearbeiten des Textinhalts oder der Tagnamen von Knoten.

    Fügen Sie beispielsweise nach der <p>Marseille</p> Zeile hinzu<p>Dijon</p>.

  5. Klicken Sie außerhalb des HTML-Editors auf die DOM-Struktur, oder drücken Sie STRG+EINGABETASTE. Ihre Bearbeitungen werden auf die DOM-Struktur und die gerenderte Webseite angewendet, und der HTML-Editor wird geschlossen:

    Die neue DOM-Struktur mit einem zusätzlichen Knoten, nachdem der HTML-Editor geschlossen wurde

Neuanordnen von DOM-Knoten

Ziehen Sie die Knoten wie folgt, um Knoten in der DOM-Struktur neu anzuordnen:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter DOM-Knoten neu anordnen mit der rechten Maustaste auf Elvis Presley , und wählen Sie dann Untersuchen aus.

  3. Ziehen Sie <p>Elvis Presley</p> in der DOM-Struktur an den Anfang der Liste:

    Ziehen Sie den Knoten an den Anfang der Liste.

Zustand erzwingen

Sie können erzwingen, dass Knoten in Zuständen wie :active, :hover, :focus, :visitedund :focus-withinwie folgt verbleiben:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Zeigen Sie auf der gerenderten Webseite unter Force state auf Der Herr der Fliegen. Die Hintergrundfarbe wird orange.

  3. Klicken Sie mit der rechten Maustaste auf Der Herr der Fliegen, und wählen Sie dann Untersuchen aus.

  4. Klicken Sie mit der rechten Maustaste auf <p class="demo--hover">The Lord of the Flies</p>, und wählen Sie dann Zustand >erzwingen:zeigen aus. Wenn diese Option nicht angezeigt wird, finden Sie weitere Informationen unter Anhang: Fehlende Optionen weiter unten. Die Hintergrundfarbe bleibt orange, obwohl Sie nicht auf den Knoten zeigen.

Ausblenden eines Knotens

Drücken Sie H , um einen Knoten wie folgt auszublenden:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Knoten ausblenden mit der rechten Maustaste auf Die Sterne mein Ziel , und wählen Sie dann Untersuchen aus.

  3. Drücken Sie die Taste H . Der Knoten ist auf der gerenderten Webseite ausgeblendet:

    Wie der Knoten in der DOM-Struktur aussieht, nachdem er ausgeblendet wurde

  4. Drücken Sie erneut die H-Taste . Der Knoten wird erneut angezeigt.

Löschen eines Knotens

Drücken Sie ENTF , um einen Knoten wie folgt zu löschen:

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Knoten löschen mit der rechten Maustaste auf Foundation , und wählen Sie dann Untersuchen aus.

  3. Drücken Sie ENTF. Der Knoten wird gelöscht.

  4. Drücken Sie STRG+Z (Windows, Linux) oder BEFEHL+Z (macOS). Die letzte Aktion wird rückgängig und der Knoten wird erneut angezeigt.

Zugreifen auf Knoten in der Konsole

DevTools bietet einige Tastenkombinationen für den Zugriff auf DOM-Knoten über das Konsolentool oder das Abrufen von JavaScript-Verweisen auf die einzelnen Knoten.

Verweisen Sie auf den aktuell ausgewählten Knoten mit 0 USD.

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

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Verweis auf den aktuell ausgewählten Knoten mit $0 mit der rechten Maustaste auf Die linke Hand der Dunkelheit , und wählen Sie dann Untersuchen aus.

  3. Drücken Sie die ESC-TASTE , um das Konsolentool im Bereich Schnellansicht zu öffnen.

  4. Geben Sie ein $0 , und drücken Sie die EINGABETASTE. Das Ergebnis des Ausdrucks zeigt an, dass $0 als ausgewertet wird <p>The Left Hand of Darkness</p>:

    Das Ergebnis des ersten $0-Ausdrucks in der Konsole

  5. Zeigen Sie auf das Ergebnis. Der Knoten ist im Viewport hervorgehoben.

  6. Klicken Sie <p>Dune</p> in die DOM-Struktur, geben Sie $0 erneut in die Konsole ein, und drücken Sie dann erneut die EINGABETASTE . $0 ergibt <p>Dune</p>nun :

    Das Ergebnis des zweiten $0-Ausdrucks in der Konsole

Als globale Variable speichern

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

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Als globale Variable speichern mit der rechten Maustaste auf Der große Ruhezustand, und wählen Sie dann Untersuchen aus.

  3. Klicken Sie mit der rechten Maustaste in <p>The Big Sleep</p> die DOM-Struktur, und wählen Sie dann Als globale Variable speichern aus. Wenn diese Option nicht angezeigt wird, finden Sie weitere Informationen unterAnhang: Fehlende Optionen weiter unten.

  4. Geben Sie temp1 in der Konsole ein , und drücken Sie dann die EINGABETASTE. Das Ergebnis des Ausdrucks zeigt, dass die Variable zum Knoten ausgewertet wird:

    Das Ergebnis des temp1-Ausdrucks

Kopieren des JS-Pfads

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

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter JS-Pfad kopieren mit der rechten Maustaste auf Die Brüder Karamazov, und wählen Sie dann Untersuchen aus.

  3. Klicken Sie mit der rechten Maustaste in <p>The Brothers Karamazov</p> die DOM-Struktur, und wählen Sie dann CopyJS Path (JS-Pfad> kopieren) aus. Ein document.querySelector() Ausdruck, der in den Knoten aufgelöst wird, wurde in die Zwischenablage kopiert.

  4. Drücken Sie STRG+V (Windows, Linux) oder BEFEHL+V (macOS), um den Ausdruck in das Konsolentool einzufügen.

  5. Drücken Sie die EINGABETASTE , um den Ausdruck auszuwerten. Der Ausdruck Copy JS Path ergibt den Knoten:

    Das Ergebnis des Ausdrucks

Unterbrechen von DOM-Änderungen

DevTools ermöglicht es Ihnen, das JavaScript einer Seite anzuhalten, wenn javaScript das DOM ändert.

Unterbrechen von Attributänderungen

Verwenden Sie Breakpoints für Attributänderungen, wenn Sie javaScript anhalten möchten, wodurch sich jedes Attribut eines Knotens ändert.

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Bei Attributänderungen unterbrechen mit der rechten Maustaste auf Sauerkraut , und wählen Sie dann Untersuchen aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf <p id="botm_target">Sauerkraut</p>, und wählen Sie dann Bei>Attributänderungen unterbrechen aus:

    Unterbrechen von Attributänderungen

    Weitere Informationen finden Sie unter Anhang: Fehlende Optionen , wenn die Option nicht angezeigt wird.

  4. Klicken Sie auf die Schaltfläche Hintergrund festlegen . Dadurch wird das style -Attribut des Knotens auf background-color:thistlefestgelegt. DevTools hält die Seite an und hebt den Code hervor, der dazu geführt hat, dass sich das Attribut im Quellentool geändert hat:

    Das Quellentool mit der Codezeile, die die Änderung des Attributs verursacht hat

  5. Klicken Sie auf Skript fortsetzen (Skript fortsetzen), um die JavaScript-Ausführung fortzusetzen.

Unterbrechung beim Entfernen von Knoten

Wenn Sie anhalten möchten, wenn ein bestimmter Knoten entfernt wird, verwenden Sie Breakpoints zum Entfernen von Knoten.

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Unterbrechen bei Knotenentfernung mit der rechten Maustaste auf Neuromancer , und wählen Sie dann Untersuchen aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf <p id="target">Neuromancer</p>, und wählen Sie dann Bei>Knotenentfernung unterbrechen aus. Weitere Informationen finden Sie unter Anhang: Fehlende Optionen , wenn die Option nicht angezeigt wird.

  4. Klicken Sie oben auf die Schaltfläche Löschen . DevTools hält die Seite an und hebt den Code hervor, der dazu geführt hat, dass der Knoten entfernt wurde.

  5. Wählen Sie Skript fortsetzen (Skript fortsetzen) aus.

Unterbrechen von Änderungen der Unterstruktur

Nachdem Sie einen Unterstrukturänderungshaltepunkt auf einem Knoten platziert haben, hält DevTools die Seite an, wenn eines der Nachfolger des Knotens hinzugefügt oder entfernt wird.

  1. Öffnen Sie die Demoseite für DOM-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter Änderungen der Unterstruktur unterbrechen mit der rechten Maustaste auf A Fire Upon The Deep ( Feuer im Tiefen ), und wählen Sie dann Untersuchen aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf <div id="ul_target">den Knoten über <p>A Fire Upon the Deep</p>, und wählen Sie dann Bei>Änderungen der Unterstruktur unterbrechen aus. Wenn der Befehl Unterstrukturänderungen nicht angezeigt wird, finden Sie weitere Informationen unter Anhang: Fehlende Optionen.

  4. Klicken Sie auf Untergeordnetes Element hinzufügen. Der Code wird angehalten, da der Liste ein <p> Knoten hinzugefügt wurde.

  5. Wählen Sie Skript fortsetzen (Skript fortsetzen) aus.

Nächste Schritte

Dies deckt die meisten DOM-bezogenen Features in DevTools ab. Sie können die restlichen Features ermitteln, indem Sie mit der rechten Maustaste auf Knoten in der DOM-Struktur klicken und mit den anderen Optionen experimentieren, die in diesem Tutorial nicht behandelt wurden. Siehe auch Tastenkombinationen des Elements-Tools.

Sehen Sie sich die Übersicht über DevTools an, um zu erfahren, was Sie sonst noch mit DevTools tun können.

Anhang: HTML im Vergleich zum DOM

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

Wenn Sie einen Webbrowser verwenden, um eine Seite anzufordern, gibt der Server 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 analysiert dann den HTML-Code und erstellt eine Struktur von Objekten basierend auf dem HTML-Code wie folgt:

html
    head
        title
    body
        h1
        p
        script

Diese Struktur von Objekten oder Knoten, die den Inhalt der Seite darstellen, wird als Dom (Document Object Model) bezeichnet. Im Moment sieht die DOM-Struktur wie der HTML-Code aus. Angenommen, das Skript, auf das unten im HTML-Code verwiesen wird, führt den folgenden 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 folgt aus:

html
    head
        title
    body
        p
        script
        p

Der HTML-Code der Seite unterscheidet sich jetzt vom DOM. Anders ausgedrückt: HTML stellt den ursprünglichen Seiteninhalt dar, und das DOM stellt den aktuellen Seiteninhalt dar. 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: Fehlende Optionen

Viele der Anweisungen in diesem Tutorial weisen Sie an, mit der rechten Maustaste auf einen Knoten in der DOM-Struktur zu klicken und dann eine Option aus dem Kontextmenü auszuwählen, das eingeblennt wird. Wenn die angegebene Option nicht im Kontextmenü aufgeführt ist, klicken Sie mit der rechten Maustaste vom Knotentext weg, oder klicken Sie auf die ... Schaltfläche links neben dem Knoten:

Klicken, wenn nicht alle Optionen angezeigt werden

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.