Freigeben über

Interagieren mit dem DOM über die Konsole

  • Artikel

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 Tool Inspect verwenden, um Elemente auszuwählen, und indem Sie das Tool Elemente verwenden, um das DOM zu ändern, z. B. zum Hinzufügen oder Ändern von Elementattributen oder Formatvorlagen.

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 mithilfe von DOM-APIs bearbeiten.

Weitere Informationen zum Inspect-Tool finden Sie unter Analysieren von Seiten mit dem Inspect-Tool. Weitere Informationen zum Elementtool finden Sie unter Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elementtool.

Suchen eines Elements in der DOM-Struktur

So suchen Sie ein Element in der DOM-Struktur im Konsolentool :

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 Sie den folgenden Code in die Konsole ein, oder fügen Sie ihn ein, und drücken Sie dann 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 Standard-Element

  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 Standard-Element, hervorgehoben auf der gerenderten Webseite

Ä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-Elementattributes mithilfe der Konsole fest, um die Formatierung 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 für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 Verweises auf ein Element

Auf einer komplexen Webseite kann es schwierig sein, das richtige Element zu finden, das geändert werden soll. Sie können jedoch das Inspect-Tool verwenden, um Ihnen zu helfen. Angenommen, Sie möchten den Text des ersten Links im Abschnitt 1-Element der gerenderten Seite ändern:

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

So rufen Sie einen Verweis auf das Linkelement ab, das Sie ändern möchten:

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 Überprüfen (Toolsymbol überprüfen), und zeigen Sie dann auf der gerenderten Webseite auf einen Link, z. B . Link 1:

    Wenn Sie mit dem Mauszeiger auf einen Link zeigen, wenn Sie das Tool

  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 Linkelement

  5. Klicken Sie auf die ... Schaltfläche neben dem -Element in der DOM-Struktur, und wählen Sie dann CopyCopy JS path (JS-Pfad kopieren>) aus:

    Menüelement

    Hier sehen Sie den 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 Linkelement verweist, das Sie mithilfe des Inspect-Tools ausgewählt haben.

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

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

    Das Konsolentool mit dem JS-Pfad und textContent-Ausdruck sowie der Webseite, auf der der aktualisierte Linktext angezeigt wird

Verwenden Sie alle DOM-APIs, die Sie in der Konsole ändern möchten. Um dies zu vereinfachen, enthält die Konsole einige Hilfsprogrammmethoden.

Hilfreiche Konsolenhilfsprogrammfunktionen

Viele praktische Methoden 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 Funktionen und Selektoren des Konsolentools.

Abrufen von Elementen mit den $-Funktionen und Tastenkombinationen

Das $ Zeichen hat im Konsolentool eine besondere Bedeutung:

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

  • $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. Daher können Sie im vorherigen Beispiel Abrufen eines Verweises auf ein Element, nachdem Sie das Element mithilfe des Inspect-Tools ausgewählt haben, seinen Text mithilfe von $0.textContent = "Updated link" ändern, um denselben Effekt zu erzielen.

  • $x() ermöglicht das Auswählen von DOM-Elementen mithilfe von XPath.

Abrufen aller Links von der Seite

In diesem Beispiel verwenden Sie die $$() Hilfsfunktion, um alle Links auf der Webseite aufzulisten. Anschließend verwenden Sie diese Funktion zusammen mit der filter() Arraymethode, um die Links zu entfernen, die nicht mit https beginnen (z. B. die Ankerlinks auf der aktuellen 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 für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 dann die EINGABETASTE:

    $$('a');

    Das Ergebnis der $$('a')-Funktion in der Konsole, die ein Array von Elementen ist

    $$('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:

    Beim Erweitern des ersten Elements im Array werden seine Eigenschaften angezeigt.

  5. Verwenden Sie die Arraymethode, um die map() 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 und text zugeordnet ist.

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

    Die Liste der Links auf der Seite mit jedem Linktext und href-Attribut

  7. Um nur externe Links aufzulisten, verwenden Sie die filter() Arraymethode, 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 der Elemente von 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 in einer sortierbaren Tabelle anzeigen, indem Sie die console.table() Hilfsfunktion verwenden:

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 dann die EINGABETASTE:

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

    Die Liste der <img> Elemente auf der Webseite wird in der Konsole angezeigt, die als Tabelle formatiert ist, wobei die Attribute und jedes alt Bildes src als Spalten sind:

    Das Konsolentool mit der Console.table()-Funktion und einer Tabelle, die alle Bilder auflistet

Abrufen aller Seitenüberschriften und Anker-URLs

In diesem Beispiel erhalten Sie alle Überschriften auf der Webseite, 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 für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 dann 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 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 ihren URLs anzeigt

Kopieren von Informationen aus der Konsole

In den vorherigen Beispielen haben Sie Listen von Elementen und Informationszeichenfolgen generiert. Es kann hilfreich sein, die generierten Informationen aus der Konsole zu kopieren und an einer anderen Stelle einzufügen.

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

  1. Wechseln Sie zu der Webseite, aus der Sie einige Informationen extrahieren möchten. Öffnen Sie beispielsweise die Demoseite für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 dann die EINGABETASTE:

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

    Die copy() Hilfsfunktion kann jedes Argument, das in eine Zeichenfolge konvertiert 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 der Konsole

Wenn Sie Code in der Konsole ausführen, werden häufig viele Eingabeanweisungen und Ausgabeergebnisse angezeigt, die Sie nicht mehr anzeigen müssen. Sie können die Konsole mithilfe der clear() Hilfsfunktion löschen.

Auflisten der Ereignislistener, die einem Element zugewiesen sind

Verwenden Sie die Hilfsfunktion, um alle Ereignislistener aufzulisten, die getEventListeners() einem Element zugewiesen sind:

  1. Wechseln Sie zu der Webseite, die Sie überprüfen möchten. Öffnen Sie beispielsweise die Demoseite für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 Überprüfen , 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 ist 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);

    Im obigen Codeausschnitt $0 ist eine Verknüpfung zum aktuell ausgewählten <img> Element im Elementtool . Die getEventListeners() Hilfsfunktion gibt ein Objekt zurück, das alle Ereignislistener enthält, die dem Bild zugewiesen sind.

  5. Erweitern Sie das -Objekt, und erweitern Sie dann den einzigen Ereignislistener 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 Listenereigenschaft

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

Websites, die JavaScript verwenden, reagieren häufig auf Benutzerereignisse, die im Browser auftreten. Es kann schwierig sein, alle Ereignisse nachzuverfolgen, die vom Browser ausgelöst werden. Mit monitorEvents() der Hilfsfunktion 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 für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 ausgelöst werden, z. B. für eines der <img> Elemente, geben Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

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

    Der obige Code ü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 die Maus oder Tabulatortaste mit der Tastatur auf das Bild. Ereignisse wie mouseover, mousemoveund 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 protokolle in der Konsole jedes Mal, wenn ein Ereignis vom Browser ausgelöst wird. Dies kann zu viel Rauschen in der Konsole führen. Sie können auch bestimmte Ereignisse für ein Element überwachen.

Überwachen bestimmter Ereignisse für ein Element

So starten Sie die Überwachung bestimmter Ereignisse für ein Element:

  1. Wechseln Sie zu der Webseite, die Sie überwachen möchten. Öffnen Sie beispielsweise die Demoseite für DOM-Interaktionen des DevTools-Konsolentools in einer neuen Registerkarte oder in 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 auf einem ersten <img> Element auf der Seite ausgelöst werden, geben Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

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

  4. Klicken Sie auf der gerenderten Webseite auf das erste Bild. mousedownDie mouseupEreignisse , und click werden in der Konsole protokolliert:

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

Überwachen von Ereignissen im Fenster

So erhalten Sie bei jedem Bildlauf 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 Sie auf der Seite, und ändern Sie die Größe des Browserfensters. Die Konsole protokolliert die ausgelösten Ereignisse:

    Das Konsolentool, das die Liste der Ereignisse zum Ändern der Größe und des Bildlaufs anzeigt

Beenden der Überwachung von Ereignissen

Während der Überwachung von Ereignissen im DOM kann die Konsole laut werden. Verwenden Sie die Hilfsfunktion, um die Überwachung von unmonitorEvents() 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 die Konsole eingeben, sollten Sie stattdessen den Code als Codeausschnitt speichern und dann den Codeausschnitt ausführen. Codeausschnitte werden im Tool Quellen gespeichert, und Sie können sie dort oder im Menü Befehl ausführen. Weitere Informationen finden Sie unter Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Webseite.

Siehe auch