Come posso registrare un elemento HTML come oggetto JavaScript?

90

Utilizzando Google Chrome, se sei console.logun oggetto, ti consente di ispezionare l'elemento nella console. Per esempio:

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

Questo viene stampato Objectche può essere ispezionato facendo clic sulle frecce accanto ad esso. Se tuttavia provo a registrare un HTMLElement:

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

Viene stampato <html></html>che non può essere ispezionato facendo clic sulle frecce accanto ad esso. Se voglio vedere l'oggetto JavaScript (con i suoi metodi e campi) invece del solo DOM dell'elemento, come lo farei?

— Ben Flynn
fonte

165

Usa 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

Se sei già all'interno della console, puoi semplicemente digitare dirinvece di console.dir:

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

Per elencare semplicemente i diversi nomi di proprietà (senza i valori), è possibile utilizzare Object.keys:

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

Anche se non esiste un console.keys()metodo pubblico , se sei già all'interno della console, puoi semplicemente inserire:

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

Tuttavia, questo non funzionerà al di fuori della finestra della console.

— Mathias Bynens
fonte

Quando uso console.dir () direttamente nella console, funziona. Ma se lo scrivo nel mio file .js effettivo in VS Code, la console dello sviluppatore di Chrome registra solo il nome del file in cui è stato scritto e il numero di riga. Ti capita di sapere perché?

— Maiya

27

prova questo:

console.dir(element)

Riferimento
[Video] Paul Irish su come diventare un utente esperto di console.

— Ross
fonte

+1 che usavo sempre [[element]]per creare un array in modo che Chrome fosse costretto a visualizzarlo come oggetto ... Grazie!

— pimvdb

Ottima risposta semplice. Per tipo "più vecchio" è arrivato un capello dopo l'altro, da qui l'accetto, ma molte grazie!

— Ben Flynn

Nessun problema. Non mi importa quale sia accettata, ma la risposta accettata dovrebbe essere quella più utile per gli altri in seguito.

— Ross

2

Il browser stampa solo la parte html, puoi mettere l'elemento in un oggetto per vedere la struttura della cupola.

console.log({element})

— Navid Shad
fonte