Interagieren mit dem DOM über die Konsole

Das Konsolentool ist eine hervorragende Möglichkeit, mit der Webseite im Browser zu interagieren. In DevTools interagieren Sie in der Regel mit dem DOM, indem Sie das Inspect-Tool verwenden, um Elemente auszuwählen, und indem Sie das Elementtool verwenden, um das DOM zu modifizieren, z. B. um Elementattribute oder -stile hinzuzufügen oder zu ändern.

Das Konsolentool kann auch für die Interaktion mit dem DOM mithilfe von JavaScript-Code verwendet werden. Beispielsweise können Sie Elemente in der DOM-Struktur suchen und diese mithilfe von DOM-APIs bearbeiten.

Weitere Informationen zum Überprüfungstool finden Sie unter Analysieren von Seiten mit dem Überprüfungstool. Weitere Informationen zum Elemente-Tool finden Sie unter Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elemente-Tool.

Suchen eines Elements in der DOM-Struktur

So suchen Sie ein Element in der DOM-Struktur über das Konsolentool :

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Geben oder fügen Sie den folgenden Code in die Konsole ein und drücken Sie die EINGABETASTE.

    document.querySelector('main');

    Das <main> Element aus der DOM-Struktur wird in der Konsole angezeigt:

    Das Konsolentool von DevTools mit dem document.querySelector-Ausdruck und dem resultierenden Hauptelement

  4. Zeigen Sie in der Konsole auf das resultierende HTML-Element <main> , oder drücken Sie UMSCHALT+TAB. Auf der gerenderten Webseite hebt DevTools das entsprechende <main> Element hervor:

    Das Hauptelement, das auf der gerenderten Webseite hervorgehoben ist

Ändern des DOM der Webseite

Sie können Änderungen an der DOM-Struktur der Webseite über das Konsolentool vornehmen. In diesem Beispiel legen Sie den Wert eines DOM-Elementattributs mithilfe der Konsole fest, um das Styling des Elements zu beeinflussen: Sie fügen dem <h1> Titel der Seite einen grauen Hintergrund hinzu.

  1. Wechseln Sie zu der Webseite, die Sie ändern möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Fügen Sie den folgenden Code in die Konsole ein:

    document.querySelector("h1").style.backgroundColor = "lightgrey";

    Hinter dem Seitentitel wird ein grauer Hintergrund angezeigt:

    Das Konsolentool mit dem obigen JavaScript-Code und der Webseite mit dem grauen Titel

Abrufen eines Bezugs auf ein Element

Auf einer komplexen Webseite kann es schwierig sein, das richtige Element zum Ändern zu finden. Aber Sie können das Inspect-Tool verwenden, um Ihnen zu helfen. Angenommen, Sie möchten den Text des ersten Links innerhalb des Abschnitts 1-Elements der gerenderten Seite ändern:

Den Link, den Sie auf der Seite ändern möchten

So rufen Sie einen Verweis auf das Link-Element ab, das Sie ändern möchten:

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Klicken Sie auf das Tool "Untersuchen " (Symbol "), und zeigen Sie dann auf der gerenderten Webseite auf einen Link, z. B. "Link 1":

    Wenn Sie mit dem Untersuchungstool auf einen Link zeigen, wird der Link hervorgehoben

  4. Klicken Sie auf der gerenderten Webseite auf den Link mit dem Mauszeiger. DevTools öffnet das Tool "Elemente ", wobei das entsprechende Element ausgewählt ist:

    Das Elementtool in DevTools mit ausgewähltem Link-Element

  5. Klicken Sie auf die ... Schaltfläche neben dem Element in der DOM-Struktur, und wählen Sie dann Kopieren> desJS-Pfads aus:

    Das Menüelement

    Hier ist der JS-Pfad, den Sie kopiert haben:

    document.querySelector("body > main > section:nth-child(1) > ul > li:nth-child(1) > a")

    Der obige Pfad ist ein CSS-Selektor, der auf das Link-Element verweist, das Sie mit dem Inspect-Tool ausgewählt haben.

  6. Fügen Sie in der Konsole den kopierten JavaScript-Pfad ein, drücken Sie jedoch noch nicht die EINGABETASTE .

  7. Ändern Sie den Text des Links in Updated link. Fügen Sie dazu den zuvor eingefügten JavaScript-Pfad hinzu .textContent = "Updated link" :

    Das Konsolentool mit dem JS-Pfad und dem textContent-Ausdruck und der Webseite mit dem aktualisierten Linktext

Verwenden Sie beliebige DOM-APIs, um die DOM-Struktur in der Konsole zu ändern. Um es bequemer zu machen, verfügt die Konsole über einige Hilfsmethoden.

Hilfreiche Hilfsfunktionen der Konsole

Viele Komfortmethoden und Tastenkombinationen stehen Ihnen als Hilfsfunktionen im Konsolentool zur Verfügung. Einige dieser Hilfsfunktionen sind sehr nützlich für die Interaktion mit der DOM-Struktur einer Webseite und werden unten beschrieben. Weitere Informationen finden Sie unter Hilfsfunktionen und Selektoren des Konsolentools.

Abrufen von Elementen mit $-Funktionen und Tastenkombinationen

Das $ Zeichen hat im Konsolentool eine besondere Bedeutung:

  • $$() Die $() und-Funktionen sind kürzere Versionen der document.querySelector()document.querySelectorAll() und-Funktionen.

  • $0, $1, $2, $3und $4 sind Verknüpfungen zu Elementen, die Sie kürzlich im Tool "Elemente" ausgewählt haben. $0 ist immer das zuletzt ausgewählte Element. Im vorherigen Beispiel "Abrufen eines Bezugs auf ein Element" können Sie, nachdem Sie das Element mithilfe des Überprüfungstools ausgewählt haben, seinen Text $0.textContent = "Updated link" ändern, um denselben Effekt zu erzielen.

  • $x() ermöglicht die Auswahl von DOM-Elementen mittels XPath.

Abrufen aller Links von der Seite

In diesem Beispiel verwenden Sie die $$() Hilfsprogrammfunktion, um alle Links auf der Webseite aufzulisten. Anschließend verwenden Sie diese Funktion zusammen mit der filter() Array-Methode, um die Links zu entfernen, die nicht mit https beginnen (z. B. die Ankerlinks auf der vorliegenden Webseite), um die Liste so zu filtern, dass nur externe Links enthalten sind.

  1. Wechseln Sie zu der Webseite, von der Sie die Links abrufen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Um die Liste aller Links auf der Seite abzurufen, geben Sie den folgenden Code in die Konsole ein, und drücken Sie die EINGABETASTE:

    $$('a');

    Das Ergebnis der Funktion $$('a') in der Konsole, bei der es sich um ein Array von Elementen handelt

    $$('a') ist die Abkürzung für document.querySelectorAll('a').

  4. Erweitern Sie die Liste der Links, die in der Konsole protokolliert sind, und erweitern Sie dann das erste Linkobjekt. Die Eigenschaften des Links werden angezeigt:

    Erweitert man das erste Element im Array, werden seine Eigenschaften angezeigt.

  5. Verwenden Sie die map() Arraymethode, um die Menge der von der $$() Funktion zurückgegebenen Informationen zu reduzieren. Die map() Methode funktioniert, da die $$() Funktion ein Array zurückgibt.

    $$('a').map(a => {
  return {url: a.getAttribute("href"), text: a.innerText}
});

    Der obige Code gibt ein Array aller Links zurück, wobei jedes Linkobjekt einem JavaScript-Objekt mit den url Eigenschaften and text zugeordnet ist.

  6. Erweitern Sie einige der zurückgegebenen Linkobjekte, um deren Eigenschaften anzuzeigen:

    Die Liste der Links auf der Seite mit dem Text und dem href-Attribut jedes Links

  7. Um nur externe Links aufzulisten, verwenden Sie die filter() Array-Methode, um die Links zu entfernen, die nicht mit httpsbeginnen:

    $$('a').map(a => {
   return {url: a.getAttribute("href"), text: a.innerText}
}).filter(a => {
   return a.url.startsWith("https");
});

    Die Liste der externen Links auf der Seite

Anzeigen von DOM-Elementen in einer Tabelle

Im vorherigen Beispiel haben Sie eine Liste von Elementen aus der Seite in der Konsole angezeigt. Die Elemente werden als JavaScript-Array angezeigt. Um die Verwendung der Liste der Elemente in der Konsole zu vereinfachen, können Sie sie stattdessen mithilfe der console.table() Hilfsprogrammfunktion in einer sortierbaren Tabelle anzeigen:

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Fügen Sie den folgenden Code in die Konsole ein, und drücken Sie die EINGABETASTE:

    console.table($$('img'), ['src','alt'])

    Die Liste der <img> Elemente auf der Webseite wird in der Konsole als Tabelle formatiert angezeigt, wobei die einzelnen src Bilder und alt Attribute als Spalten angezeigt werden:

    Das Konsolentool, das die Funktion console.table() und eine Tabelle mit allen Bildern zeigt

Abrufen aller Seitenüberschriften und Anker-URLs

In diesem Beispiel rufen Sie alle Überschriften auf der Webseite ab, die über ein id Attribut verfügen, und Sie generieren eine URL, die auf jede Überschrift verweist.

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Kopieren Sie den folgenden Code, fügen Sie ihn in die Konsole ein, und drücken Sie die EINGABETASTE:

    let headings = $$('main [id]').filter(el => {
  return el.nodeName.startsWith('H');
}).map(el => {
  return `${el.innerText}: ${document.location.href}#${el.id}\n`;
});
console.log(headings.join("\n"));

    Das Ergebnis ist Text, der den Inhalt für jede Abschnittsüberschrift enthält, gefolgt von der vollständigen URL für die Abschnittsüberschrift:

    Das Konsolentool, das die Liste aller Überschriften auf der Seite zusammen mit den zugehörigen URLs anzeigt

Kopieren von Informationen aus der Konsole

In den vorangegangenen Beispielen haben Sie Listen mit Elementen und Zeichenfolgen von Informationen generiert. Es kann nützlich sein, die generierten Informationen von der Konsole zu kopieren und an einer anderen Stelle einzufügen.

Verwenden Sie die copy() Hilfsprogrammfunktion, um den Rückgabewert aus einem Ausdruck zu kopieren, den Sie in der Konsole ausführen:

  1. Wechseln Sie zu der Webseite, von der Sie einige Informationen extrahieren möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Um die Liste aller Bild-URLs auf der Seite zu kopieren, geben Sie den folgenden Code in die Konsole ein, und drücken Sie die EINGABETASTE:

    copy($$('img').map(img => img.src).join("\n"));

    Die copy() Hilfsprogrammfunktion kann jedes Argument, das in eine Zeichenfolge umgewandelt werden kann, in die Zwischenablage kopieren. In diesem Beispiel ist das Argument eine Zeichenfolge, die alle Bild-URLs auf der Seite enthält, getrennt durch eine neue Zeile.

  4. Öffnen Sie einen Text-Editor, z. B. Visual Studio Code, und fügen Sie dann die kopierten Bild-URLs in den Editor ein:

    Die Liste der Bild-URLs in einem Text-Editor

Löschen Sie die Konsole

Wenn Sie Code in der Konsole ausführen, erhalten Sie oft viele Eingabeanweisungen und Ausgabeergebnisse, die Sie nicht mehr anzeigen müssen. Sie können die Konsole mithilfe der clear() Dienstprogrammfunktion löschen.

Auflisten der Ereignis-Listener, die einem Element zugewiesen sind

Um alle Ereignis-Listener aufzulisten, die einem Element zugewiesen sind, verwenden Sie die getEventListeners() Hilfsprogrammfunktion:

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Klicken Sie auf das Untersuchungstool, und klicken Sie dann auf der gerenderten Webseite auf eines der Bilder, um es auszuwählen. Das Tool "Elemente" wird angezeigt, und das ausgewählte Bildelement wird in der DOM-Struktur hervorgehoben:

    Das Tool

  4. Öffnen Sie das Konsolentool , geben Sie den folgenden Code ein, und drücken Sie dann die Eingabetaste:

    getEventListeners($0);

    Der obige Codeausschnitt $0 enthält eine Verknüpfung zum aktuell ausgewählten <img> Element im Tool "Elemente ". Die getEventListeners() Utility-Funktion gibt ein Objekt zurück, das alle Ereignis-Listener enthält, die dem Image zugewiesen sind.

  5. Erweitern Sie das Objekt und erweitern Sie dann den einzigen Ereignis-Listener in der Liste, um die Eigenschaften des Listeners anzuzeigen. Die listener Eigenschaft zeigt den Namen der Funktion an, die aufgerufen wird, wenn das Ereignis ausgelöst wird (in diesem Beispiel showImage):

    Das erweiterte Objekt mit der Listener-Eigenschaft

Überwachen von Ereignissen, die auf der Seite ausgelöst werden

Websites, die JavaScript verwenden, reagieren häufig auf Benutzerereignisse, die im Browser geschehen. Es kann schwierig sein, den Überblick über alle Ereignisse zu behalten, die vom Browser ausgelöst werden. Mit der monitorEvents() Hilfsprogrammfunktion können Sie Ereignisse überwachen, die auf der Webseite ausgelöst werden.

Überwachen aller Ereignisse für ein Element

So starten Sie die Überwachung von Ereignissen:

  1. Wechseln Sie zu der Webseite, die Sie überwachen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Um mit der Überwachung der Ereignisse zu beginnen, die für ein Element, z. B. für eines der <img> Elemente, ausgelöst werden, geben Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

    monitorEvents(document.querySelector('img'));

    Der Code oben überwacht alle Ereignisse, die für das erste <img> Element auf der Seite ausgelöst werden.

  4. Zeigen Sie auf der gerenderten Webseite auf das Bild, und bewegen Sie Ihre Maus oder die TAB-TASTE mit der Tastatur zum Bild. Ereignisse wie mouseover, mousemove, und focus werden in der Konsole protokolliert:

    Das Konsolentool mit der Liste aller Mausereignisse, die auf dem Bild ausgelöst werden

Wenn Sie Ereignisse überwachen, erhalten Sie jedes Mal, wenn ein Ereignis vom Browser ausgelöst wird, Protokolle in der Konsole . Dies kann zu starken Geräuschen in der Konsole führen. Sie können auch bestimmte Ereignisse für ein Element überwachen.

Überwachen bestimmter Ereignisse für ein Element

So beginnen Sie mit der Überwachung bestimmter Ereignisse für ein Element:

  1. Wechseln Sie zu der Webseite, die Sie überwachen möchten. Öffnen Sie beispielsweise die Demoseite des DevTools-Konsolentools zu DOM-Interaktionen in einer neuen Registerkarte oder einem neuen Fenster.

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Um nur die Mousedown-, Mouseup- und Click-Ereignisse zu überwachen, die durch das erste <img> Element auf der Seite ausgelöst werden, geben Sie den folgenden Code in die Konsole ein, und drücken Sie die EINGABETASTE:

    monitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);

  4. Klicken Sie auf der gerenderten Webseite auf das erste Bild. mousedown, mouseupund click Ereignisse werden in der Konsole protokolliert:

    Das Konsolentool mit der Liste der Mausereignisse, die auf dem Bild ausgelöst werden

Überwachen Sie Ereignisse im Fenster

So erhalten Sie bei jedem Scrollen oder Ändern der Fenstergröße eine Benachrichtigung in der Konsole :

  1. Fügen Sie den folgenden Code in die Konsole ein:

    monitorEvents(window, ['resize', 'scroll']);

  2. Scrollen auf der Seite und Ändern der Größe des Browserfensters. Die Konsole protokolliert die ausgelösten Ereignisse:

    Das Konsolentool mit der Liste der Größenänderungs- und Bildlaufereignisse

Überwachungsereignisse beenden

Während der Überwachung von Ereignissen im DOM kann die Konsole laut werden. Verwenden Sie die unmonitorEvents() Hilfsprogrammfunktion, um die Überwachung von Ereignissen zu beenden:

unmonitorEvents(document.querySelector('img'));
unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
unmonitorEvents(window, ['resize', 'scroll']);

Speichern von DOM-Interaktionsskripts als Codeausschnitte

Wenn Sie denselben DOM-Interaktionscode wiederholt in der Konsole eingeben, sollten Sie den Code stattdessen als Codeausschnitt speichern und dann ausführen. Codeausschnitte werden im Tool "Quellen " gespeichert, und Sie können sie dort oder über das Befehlsmenü ausführen. Weitere Informationen finden Sie unter Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Webseite.

Siehe auch

  • Zuletzt aktualisiert um