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?

javascript google-chrome google-closure-library developer-tools Ben Flynn
quelle

Antworten:

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