Bekijk de eigenschappen van DOM-objecten

Sofia Emelianova
Sofia Emelianova

Gebruik het deelvenster Elementen > Eigenschappen om door de eigenschappen van DOM- objecten te bladeren en deze te filteren.

Open het deelvenster Eigenschappen

Volg deze stappen om het venster Eigenschappen te openen:

  1. Open DevTools . Standaard wordt het paneel Elementen geopend.
  2. Selecteer een knooppunt in de DOM-structuur.
  3. Open het tabblad Eigenschappen . Als u het tabblad niet ziet, klikt u op Meer Meer en selecteer het vervolgens in het vervolgkeuzemenu.

Elementenpaneel geopend op het tabblad Eigenschappen

Ontdek eigen eigendommen

In het deelvenster Eigenschappen worden de eigen eigenschappen van het object eerst gesorteerd en vetgedrukt weergegeven.

ALT_TEXT_HIER

Vind de oorsprong van een geërfd bezit

Het deelvenster Eigenschappen evalueert accessors op ingebouwde elementen en geeft deze op het object weer als overgenomen en in een normaal lettertype.

Om de oorsprong van een overgenomen eigenschap te vinden, vouwt u een object uit, vervolgens het bijbehorende [[Prototype]] , vervolgens het geneste [[Prototype]] , enzovoort.

Het traceren van de grootte-eigenschap tot aan de getter in de prototypeketen.

In dit voorbeeld kunt u traceren waar de geërfde eigenschap size vandaan komt door de oorspronkelijke eigen (vetgedrukte) eigenschap samen met de bijbehorende getter in de prototypeketen te lokaliseren.

Bovendien worden prototypespecifieke eigenschappen alleen weergegeven op prototypes, niet op objecten. Dit maakt het gemakkelijker om objecten te diagnosticeren.

Prototype-specifieke eigenschappen.

Eigenschappen filteren

Om snel een eigenschap te vinden, typt u de naam of waarde ervan in het tekstvak Filter .

Filter

Toon alle eigendommen

Standaard toont het deelvenster Eigenschappen geen eigenschappen met null en undefined waarden.

Als u alle eigendommen wilt zien, vinkt u Alles weergeven aan .

Eigenschappen met nulwaarden.

Begrijp eigenschappen

Het deelvenster Elementen > Eigenschappen toont een verscheidenheid aan eigenschappen.

Eenvoudige eigenschappen

Eenvoudige eigenschappen zijn paren van <name>: <value> . Eenvoudige eigenschappen.

Objecten en arrays

Opvouwbaar ( Pijl naar rechts. ) eigenschappen zijn objecten {} of arrays [] . Opvouwbare eigenschappen.

Zie Objecteigenschappen inspecteren voor meer informatie over het inspecteren van JavaScript-objecten.

Eigenschappen die overeenkomen met DOM-knooppunten

Eigenschappen die overeenkomen met DOM-knooppunten zijn koppelingen. Klik op een link om het relevante knooppunt in de DOM-boom te selecteren. Link naar het hoofd-DOM-knooppunt.

Eigen en geërfde eigendommen

Eigenschappen die vetgedrukt zijn, zijn eigendom van het object. Ze worden rechtstreeks op het object gedefinieerd.

Eigenschappen in een normaal lettertype worden overgenomen van de prototypeketen. Om ze aan u te laten zien, evalueert DevTools relevante accessors op ingebouwde HTML-elementen. Eigen en geërfde eigendommen. DevTools sorteert eerst de eigen eigenschappen, zodat ze gemakkelijker te herkennen zijn.

Opsombare en niet-optelbare eigenschappen

De talloze eigenschappen zijn helder van kleur. Niet-opsombare eigenschappen zijn gedempt. Opsombare en niet-opsombare eigenschappen. U kunt de opsombare eigenschappen herhalen met de for … in loop- of Object.keys() methode.

Methoden

Methoden worden gemarkeerd met een f () . Methode.

Voor meer informatie over functies, zie Functies controleren via de console .