Erste Schritte beim Anzeigen und Ändern des DOM

  • Artikel
  • 13 Minuten Lesedauer

Befolgen Sie diese interaktiven Lernprogrammabschnitte, um die Grundlagen des Anzeigens und Änderns des Dom (Document Object Model ) einer Seite mithilfe von Microsoft Edge DevTools zu erlernen.

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

Anzeigen von DOM-Knoten

In der DOM-Struktur des Bereichs "Elemente" werden alle DOM-bezogenen Aktivitäten in DevTools ausgeführt.

Überprüfen 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 "DOM-Beispiele " in einem neuen Fenster oder einer neuen Registerkarte. Klicken Sie dazu mit der rechten Maustaste auf den Link, oder halten Ctrl Sie (Windows, Linux) oder Command (macOS) gedrückt, und klicken Sie dann auf den Link.

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

    Überprüfen eines Knotens.

    Das Elementtool von DevTools wird geöffnet. <p>Michelangelo</p> ist in der DOM-Struktur hervorgehoben.

    Hervorheben des Michelangelo-Knotens.

  2. Klicken Sie in der oberen linken Ecke von DevTools auf das Symbol "Überprüfen](../media/inspect-tool-icon-light-theme.png)"![.

    Das Inspect-Symbol.

  3. Klicken Sie unter "Knoten prüfen" auf den Text in Tokio . <p>Tokyo</p> Nun ist der Knoten in der DOM-Struktur hervorgehoben.

Das Untersuchen eines Knotens ist auch der erste Schritt zum Anzeigen und Ändern der Stile eines Knotens. Weitere Informationen finden Sie unter "Erste Schritte beim 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 "DOM-Beispiele " in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf der gerenderten Webseite unter "Mit einer Tastatur in der DOM-Struktur navigieren" mit der rechten Maustaste auf "Ringo ", und wählen Sie dann "Überprüfen" aus. <p>Ringo</p> ist in der DOM-Struktur ausgewählt.

    Untersuchen des Knotens "Ringo".

  3. Drücken Sie 2 Mal die Up Pfeiltaste. <div> markiert ist.

    Untersuchen des 'div'-Knotens.

  4. Drücken Sie die Left Pfeiltaste. Die <div> Liste wird reduziert.

  5. Drücken Sie erneut die Left Pfeiltaste. Das übergeordnete Element des <div> Knotens ist ausgewählt. In diesem Fall ist es das <section> mit der ID navigate-the-dom-tree-with-a-keyboard-1.

  6. Drücken Sie die Down Pfeiltaste 2 Mal, damit Sie die Liste, die <div> Sie gerade reduziert haben, erneut ausgewählt haben. Es sollte wie folgt aussehen: <div>... </div>

  7. Drücken Sie die Right Pfeiltaste. Die Liste wird erweitert.

Scrollen in die Ansicht

Beim Anzeigen der DOM-Struktur sind Sie möglicherweise an einem DOM-Knoten interessiert, der sich derzeit nicht im Viewport befindet. Angenommen, Sie haben zum Ende der Seite gescrollt, und Sie interessieren sich für den <h1> Knoten am oberen Rand der Seite. Mit dem Scrollen in die Ansicht können Sie den Viewport schnell neu positionieren, sodass Sie den Knoten überprüfen können.

  1. Öffnen Sie die Demoseite "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 " Überprüfen" aus.

  3. Scrollen Sie zum Ende der DOM-Beispielseite.

  4. Der <p>Magritte</p> Knoten sollte weiterhin in der DOM-Struktur ausgewählt werden. Wenn nicht, wechseln Sie zurück zu "In Ansicht scrollen" , und beginnen Sie von vorn.

  5. Klicken Sie mit der rechten Maustaste auf den <p>Magritte</p> Knoten, und klicken Sie dann auf "In Ansicht scrollen". Der Viewport scrollt wieder nach oben, um den Magritte-Knoten anzuzeigen. Siehe Anhang: Fehlende Optionen , wenn die Option " In Ansicht scrollen " nicht angezeigt wird.

Scrollen Sie in die Ansicht.

Suchen nach Knoten

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

  1. Konzentrieren Sie den Cursor auf das Elementtool.

  2. Drücken Ctrl+F Sie (Windows, Linux) oder Command+F (macOS). Die Suchleiste wird am unteren Rand der DOM-Struktur geöffnet.

  3. Geben Sie The Moon is a Harsh Mistress ein. 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 im Flug bearbeiten und überprüfen, wie sich die Änderungen auf die Seite auswirken.

Bearbeiten von Textinhalten

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

  1. Öffnen Sie die Demoseite "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 " Überprüfen" aus.

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

    Bearbeiten Sie den Text.

  4. Delete Michelle, type Leela, then press Enter to confirm the change. Der Text im DOM ändert sich von Michelle zu Leela.

Attribute bearbeiten

Doppelklicken Sie zum Bearbeiten von Attributen auf den Attributnamen oder -wert. Befolgen Sie die Anweisungen, um zu erfahren, wie Sie einem Knoten Attribute hinzufügen.

  1. Öffnen Sie die Demoseite "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 " Überprüfen" aus.

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

    Bearbeiten Sie den Knoten.

  4. Wählen Sie die Right Pfeiltaste aus, fügen Sie ein Leerzeichen hinzu, geben Sie style="background-color:gold"ein, und drücken Sie Enterdann . Die Hintergrundfarbe des Knotens ändert sich in Gold.

    Fügen Sie dem Knoten ein Formatattribut hinzu.

Knotentagnamen 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 "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 " Überprüfen" aus.

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

  4. Delete p, type button, then press Enter. Der <p> Knoten wird zu einem <button> Knoten.

    Ändern Sie den Knotentyp in die Schaltfläche.

Bearbeiten mehrerer Knoten, Texte und Attribute

Wenn Sie den Tagnamen, den Textinhalt oder die Attribute mehrerer Knoten gleichzeitig ändern möchten, können Sie einen Teil des DOM mithilfe eines HTML-Text-Editors bearbeiten.

So verwenden Sie den HTML-Editor:

  1. Öffnen Sie die Demoseite "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 "Überprüfen" 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 "Als HTML bearbeiten" aus. Der HTML-Editor wird angezeigt.

    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 von Textinhalten oder Tagnamen von Knoten.

    Versuchen Sie beispielsweise, nach der <p>Marseille</p> Zeile hinzuzufügen<p>Dijon</p>.

  5. Geben Sie Ctrl+Enter ein, um die Änderungen auf die DOM-Struktur anzuwenden und den HTML-Editor zu schließen.

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

DOM-Knoten neu anordnen

Ziehen Sie Knoten, um sie neu anzuordnen.

  1. Öffnen Sie die Demoseite "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 "Überprüfen" aus.

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

Ziehen Sie den Knoten an den Anfang der Liste.

Erzwungener Zustand

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

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

  2. Zeigen Sie auf der gerenderten Webseite unter dem Zustand "Kraft" 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 "Prüfen" aus.

  4. Klicken Sie mit der rechten Maustaste<p class="demo--hover">The Lord of the Flies</p>, und wählen Sie dann "Status > erzwingen :Hovern" aus. Siehe Anhang: Fehlende Optionen , wenn die Option nicht angezeigt wird. Die Hintergrundfarbe bleibt orange, obwohl Sie nicht tatsächlich auf den Knoten zeigen.

Ausblenden eines Knotens

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

  1. Öffnen Sie die Demoseite "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 "Überprüfen" aus.

  3. Drücken Sie die H TASTE. Der Knoten ist 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 Delete wie folgt, um einen Knoten zu löschen:

  1. Öffnen Sie die Demoseite "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 " Überprüfen" aus.

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

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

Zugreifen auf Knoten in der Konsole

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

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

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 "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 "Überprüfen" aus.

  3. Wählen Sie die Escape Taste aus, um die Konsolenschublade zu öffnen.

  4. Geben Sie ein $0 , und drücken Sie Enter. Das Ergebnis des Ausdrucks zeigt, dass $0 ausgewertet wird zu <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 die Konsole erneut ein, und drücken Sie Enter dann erneut. $0 Wertet nun folgende Werte aus<p>Dune</p>:

Das Ergebnis des zweiten $0-Ausdrucks in der Konsole.

Als globale Variable speichern

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

  1. Öffnen Sie die Demoseite "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 "Großer Schlaf", und wählen Sie dann "Überprüfen" aus.

  3. Klicken Sie mit der rechten Maustaste <p>The Big Sleep</p> in die DOM-Struktur, und wählen Sie dann "Als globale Variable speichern" aus. Siehe Anhang: Fehlende Optionen , wenn die Option nicht angezeigt wird.

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

Das Ergebnis des temp1-Ausdrucks.

JS-Pfad kopieren

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

  1. Öffnen Sie die Demoseite "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 "Überprüfen" aus.

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

  4. Drücken Sie Ctrl+V (Windows, Linux) oder Command+V (macOS), um den Ausdruck in die Konsole einzufügen.

  5. Drücken Sie Enter , um den Ausdruck auszuwerten.

Das Ergebnis des Ausdrucks "Copy JS Path ":

Das Ergebnis des Copy JS Path-Ausdrucks.

Unterbrechen von DOM-Änderungen

Mit DevTools können Sie das JavaScript einer Seite anhalten, wenn das DOM durch JavaScript geändert wird.

Unterbrechen von Attributänderungen

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

  1. Öffnen Sie die Demoseite "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 "Überprüfen" aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste <p id="botm_target">Sauerkraut</p>, und wählen Sie dann "Bei > Attributänderungen unterbrechen" aus. Siehe Anhang: Fehlende Optionen , wenn die Option nicht angezeigt wird.

    Bei Attributänderungen unterbrechen.

  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 führte, dass sich das Attribut änderte.

    Das Tool "Quellen" mit der Codezeile, die dazu führte, dass sich das Attribut änderte.

  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 Haltepunkte zum Entfernen von Knoten.

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

  2. Klicken Sie auf der gerenderten Webseite unter "Beim Entfernen von Knoten unterbrechen" mit der rechten Maustaste auf "Neuromancer ", und wählen Sie dann "Untersuchen" aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste <p id="target">Neuromancer</p>, und wählen Sie dann "Beim > Entfernen von Knoten unterbrechen" aus. Siehe 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 führte, dass der Knoten entfernt wurde.

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

Unterbrechung bei Änderungen an der Unterstruktur

Nachdem Sie einen Haltepunkt für die Unterstrukturänderung auf einem Knoten platziert haben, hält DevTools die Seite an, wenn untergeordnete Elemente des Knotens hinzugefügt oder entfernt werden.

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

  2. Klicken Sie auf der gerenderten Webseite unter "Unterstrukturänderungen unterbrechen" mit der rechten Maustaste auf "Feuer auf Tiefe ", und wählen Sie " Überprüfen" aus.

  3. Klicken Sie in der DOM-Struktur mit der rechten Maustaste auf <div id="ul_target">den Knoten oben <p>A Fire Upon the Deep</p>, und wählen Sie dann "Bei > Unterstrukturänderungen unterbrechen" aus. Wenn der Befehl " Änderungen an der Unterstruktur " nicht angezeigt wird, lesen Sie 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 umfasst die meisten DOM-bezogenen Features in DevTools. Sie können die restlichen Features ermitteln, indem Sie in der DOM-Struktur mit der rechten Maustaste auf Knoten klicken und mit den anderen Optionen experimentieren, die in diesem Lernprogramm nicht behandelt wurden. Siehe Tastenkombinationen im Elementbereich.

Sehen Sie sich die Übersicht über DevTools an, um alles andere zu entdecken, was Sie 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 genauso wie der HTML-Code aus, aber 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 nun von seinem DOM. Mit anderen Worten, HTML stellt den anfä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 Lernprogramm 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 eingeblendet wird. Wenn die angegebene Option im Kontextmenü nicht angezeigt wird, klicken Sie mit der rechten Maustaste vom Knotentext weg, oder klicken Sie auf die ... Schaltfläche links neben dem Knoten.

Wo klicken Sie, 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 Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License. Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.