Wie kann ich ein HTML-Element als JavaScript-Objekt protokollieren?

88

Wenn Sie mit Google Chrome console.logein Objekt verwenden, können Sie das Element in der Konsole überprüfen. Beispielsweise:

var a = { "foo" : "bar", "whiz" : "bang" };
console.log(a);

Dies wird ausgedruckt und Objectkann durch Klicken auf die Pfeile daneben überprüft werden. Wenn ich jedoch versuche, ein HTMLElement zu protokollieren:

var b = goog.dom.query('html')[0];
console.log(b);

Dies druckt aus, <html></html>was nicht durch Klicken auf die Pfeile daneben überprüft werden kann. Wie würde ich das tun, wenn ich das JavaScript-Objekt (mit seinen Methoden und Feldern) anstelle nur des DOM des Elements sehen möchte?

— Ben Flynn
quelle

158

Verwendung console.dir:

var element = document.documentElement; // or any other element
console.log(element); // logs the expandable <html>…</html>
console.dir(element); // logs the element’s properties and values

Wenn Sie sich bereits in der Konsole befinden, können Sie einfach Folgendes direingeben console.dir:

dir(element); // logs the element’s properties and values

Um einfach die verschiedenen Eigenschaftsnamen (ohne die Werte) aufzulisten, können Sie Folgendes verwenden Object.keys:

Object.keys(element); // logs the element’s property names

Obwohl es keine öffentliche console.keys()Methode gibt, können Sie, wenn Sie sich bereits in der Konsole befinden, einfach Folgendes eingeben:

keys(element); // logs the element’s property names

Dies funktioniert jedoch nicht außerhalb des Konsolenfensters.

— Mathias Bynens
quelle

Wenn ich console.dir () direkt in der Konsole verwende, funktioniert es. Wenn ich es jedoch in meine aktuelle .js-Datei in VS Code schreibe, protokolliert die Chrome Dev Console nur den Namen der Datei, in die es geschrieben wurde, und die Zeilennummer. Weißt du zufällig warum?

— Maiya

25

Versuche dies:

console.dir(element)

Referenz
[Video] Paul Irish über das Werden eines Konsolen-Power-Users.

— Ross
quelle

+1 Ich habe immer [[element]]ein Array erstellt, damit Chrome es als Objekt anzeigen musste ... Danke!

— Pimvdb

Tolle unkomplizierte Antwort. Durch "älteste" Sorte kam ein Haar nach dem anderen, daher die Annahme, aber vielen Dank!

— Ben Flynn

Keine Probleme. Es macht mir nichts aus, was akzeptiert wird, aber akzeptierte Antworten sollten später für andere am hilfreichsten sein.

— Ross

1

Browser nur HTML-Teil drucken, können Sie das Element in ein Objekt einfügen, um die Kuppelstruktur zu sehen.

console.log({element})

— Navid Shad
quelle