2011-10-13 9 views
12

Esto es algo que me ha estado volviendo loco durante un tiempo. Cuando console.log un nodo DOM (devuelto por ejemplo desde document.getElementById), aparece como un elemento html interactivo, como aparecería en la pestaña "Elementos".consola de Safari/WebKit.log nodo DOM como objeto?

Esto puede ser útil con seguridad, pero a veces solo quiero expandir el objeto y ver todas sus propiedades, como lo hago con cualquier otro tipo de objeto que conecte a la consola.

¿Hay alguna manera que puedo conseguir un nodo DOM para mostrar en la consola por objeto regular ??

Respuesta

24

Use console.dir en lugar de console.log.

console.log(document.body); 
<body class="question-page">...</body> 

console.dir(document.body); 
> HTMLBodyElement 
    aLink: "" 
    attributes: NamedNodeMap 
    background: "" 
    ... 

From the Firebug docs:

console.dir (objeto)

imprime un listado interactivo de todas las propiedades del objeto. Esto se ve idéntico a la vista que vería en la pestaña DOM.

Chrome soporta console.dir así, as shown here(no se muestra como una propiedad de console, pero está disponible).

enter image description here

+0

Sorprendente! A pesar de mis búsquedas y de leer los documentos de Apple, console.dir no fue mencionado en ninguna parte, ¡pero funciona perfectamente! – devios1

+1

@chaiguy: Tengo que admitir que estoy muy contento de que hayas hecho esta pregunta. Siempre me he preguntado lo mismo, pero nunca lo busqué. Siempre doblaba mis elementos en Arrays, como '[[document.body]]'. Esto funciona, pero necesita expandir la matriz interna para llegar al objeto del elemento. 'dir' es mucho más agradable! : o) – user113716

+0

La ironía es que podría haber simplemente consola-sesión 'console' y verificado su prototipo. Me encanta JavaScript :) – devios1

Cuestiones relacionadas