Attribute von DOM-Objekten ansehen

Sofia Emelianova
Sofia Emelianova
GitHub

Elemente verwenden > Tab Properties (Eigenschaften) zum Suchen und Filtern der Eigenschaften von DOM-Objekten.

Tab „Eigenschaften“ öffnen

So öffnen Sie den Tab Eigenschaften:

  1. Öffnen Sie die Entwicklertools. Standardmäßig wird der Bereich Elemente geöffnet.
  2. Wählen Sie in der DOM-Baumstruktur einen Knoten aus.
  3. Wechseln Sie zum Tab Eigenschaften. Wenn der Tab nicht angezeigt wird, klicken Sie auf das Dreipunkt-Menü Mehr  und wählen Sie ihn dann aus dem Drop-down-Menü aus.

Bereich „Elemente“ mit Tab „Eigenschaften“ geöffnet

Eigene Unterkünfte

Auf dem Tab Properties werden die eigenen Properties des Objekts zuerst und fett formatiert angezeigt.

ALT_TEXT_HERE

Ursprung einer übernommenen Eigenschaft ermitteln

Auf dem Tab Eigenschaften werden Accessoren für integrierte Elemente ausgewertet und im Objekt als übernommen und in normaler Schrift angezeigt.

Um den Ursprung einer übernommenen Eigenschaft zu ermitteln, maximieren Sie ein Objekt, dann seine [[Prototype]], dann die verschachtelte [[Prototype]] usw.

Tracing der Größeneigenschaft bis zu ihrem Getter in der Prototypkette

In diesem Beispiel können Sie verfolgen, woher die übernommene size-Eigenschaft stammt, indem Sie die ursprüngliche eigene (fett) Eigenschaft in der Prototyp-Kette zusammen mit dem entsprechenden Getter suchen.

Darüber hinaus werden prototypspezifische Eigenschaften nur in Prototypen und nicht auf Objekten angezeigt. Dies vereinfacht die Diagnose von Objekten.

Prototypspezifische Eigenschaften.

Filtereigenschaften

Um eine Eigenschaft schnell zu finden, beginnen Sie mit der Eingabe des Namens oder Werts in das Eingabefeld Filter.

Filter

Alle Unterkünfte anzeigen

Standardmäßig werden auf dem Tab Eigenschaften keine Unterkünfte mit den Werten null und undefined angezeigt.

Wenn Sie alle Unterkünfte sehen möchten, klicken Sie das Kästchen Alle anzeigen an.

Unterkünfte mit Nullwerten

Unterkünfte

Auf dem Tab Elemente > Eigenschaften werden verschiedene Eigenschaften angezeigt.

Einfache Properties

Einfache Properties sind Paare von <name>: <value>. Einfache Unterkünfte.

Objekte und Arrays

Minimierbare Eigenschaften () sind Objekte {} oder Arrays []. Zusammenklappbare Unterkünfte

Weitere Informationen zum Untersuchen von JavaScript-Objekten finden Sie unter Objekteigenschaften prüfen.

Attribute, die DOM-Knoten entsprechen

Properties, die DOM-Knoten entsprechen, sind Links. Klicken Sie auf einen Link, um den relevanten Knoten in der DOM-Struktur auszuwählen. Link zum Haupt-DOM-Knoten.

Eigene und übernommene Properties

Fett formatierte Eigenschaften sind die eigenen Objekte. Sie werden direkt im -Objekt definiert.

Eigenschaften in normaler Schriftart werden aus der Prototypkette übernommen. Dazu werden in den DevTools relevante Zugriffe auf integrierte HTML-Elemente ausgewertet. Eigene und übernommene Properties. In den Entwicklertools werden eigene Properties zuerst sortiert, damit sie leichter zu erkennen sind.

Auflistbare und nicht aufzählbare Attribute

Eigenschaften, die gezählt werden können, sind hell. Nicht aufzählbare Attribute werden ausgeblendet. Auflistbare und nicht aufzählbare Attribute. Sie können mit der for … in-Schleife oder der Methode Object.keys() über die aufzählbaren Attribute iterieren.

Methoden

Methoden sind mit einem f () gekennzeichnet. Methode.

Weitere Informationen zu Funktionen finden Sie unter Funktionen prüfen in der Console.