¿Cómo puedo registrar un elemento HTML como un objeto JavaScript?

90

Usando Google Chrome, si tiene console.logun objeto, le permite inspeccionar el elemento en la consola. Por ejemplo:

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

Esto imprime lo Objectque se puede inspeccionar haciendo clic en las flechas junto a él. Sin embargo, si intento registrar un HTMLElement:

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

Esto imprime lo <html></html>que no se puede inspeccionar haciendo clic en las flechas al lado. Si quiero ver el objeto JavaScript (con sus métodos y campos) en lugar de solo el DOM del elemento, ¿cómo lo haría?

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

Respuestas:

164

Utilizar 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

Si ya está dentro de la consola, simplemente puede escribir en dirlugar de console.dir:

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

Para simplemente enumerar los diferentes nombres de propiedad (sin los valores), puede usar Object.keys:

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

Aunque no hay un console.keys()método público , si ya está dentro de la consola, puede ingresar:

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

Sin embargo, esto no funcionará fuera de la ventana de la consola.

Mathias Bynens
fuente
Cuando uso console.dir () directamente en la consola, funciona. Pero si lo escribo en mi archivo .js real en VS Code, la consola de desarrollo de Chrome simplemente registra el nombre del archivo en el que se escribió y el número de línea. ¿Sabes por qué?
Maiya
27

prueba esto:

console.dir(element)

Referencia
[Video] Paul Irish sobre cómo convertirse en un usuario avanzado de la consola.

Ross
fuente
+1 Siempre estaba usando [[element]]para crear una matriz de modo que Chrome se viera obligado a mostrarla como un objeto ... ¡Gracias!
pimvdb
Gran respuesta sencilla. Por el tipo 'más viejo' vino un pelo después del otro, de ahí el aceptar, ¡pero muchas gracias!
Ben Flynn
No hay problemas. No me importa cuál se acepta, pero la respuesta aceptada debería ser la más útil para los demás más adelante.
Ross
1

El navegador imprime solo la parte html, puede colocar el elemento en un objeto para ver la estructura del domo.

console.log({element})
Navid Shad
fuente