Como posso registrar um elemento HTML como um objeto JavaScript?

90

Usando o Google Chrome, se você for console.logum objeto, permite inspecionar o elemento no console. Por exemplo:

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

Isso imprime Objectque pode ser inspecionado clicando nas setas ao lado dele. No entanto, se eu tentar registrar um HTMLElement:

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

Isso imprime <html></html>que não pode ser inspecionado clicando nas setas ao lado dele. Se eu quiser ver o objeto JavaScript (com seus métodos e campos) em vez de apenas o DOM do elemento, como faria isso?

Ben Flynn
fonte

Respostas:

165

Use 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 você já estiver dentro do console, pode simplesmente digitar em dirvez de console.dir:

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

Para simplesmente listar os diferentes nomes de propriedades (sem os valores), você pode usar Object.keys:

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

Mesmo que não haja um console.keys()método público , se você já estiver dentro do console, pode apenas inserir:

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

No entanto, isso não funcionará fora da janela do console.

Mathias Bynens
fonte
Quando eu uso console.dir () diretamente no console, ele funciona. Mas se eu escrever no meu arquivo .js real no VS Code, o console de desenvolvimento do Chrome apenas registra o nome do arquivo em que foi escrito e o número da linha. Por acaso sabe por quê?
Maiya
27

tente isto:

console.dir(element)

Referência
[Vídeo] Paul Irish sobre como se tornar um usuário avançado do console.

Ross
fonte
+1 Eu estava sempre usando [[element]]para criar um array para que o Chrome fosse forçado a exibi-lo como um objeto ... Obrigado!
pimvdb,
Ótima resposta direta. Por 'mais antigo' veio um fio de cabelo após o outro, daí a aceitação, mas muito obrigado!
Ben Flynn,
Sem problemas. Não me importo qual seja aceita, mas a resposta aceita deve ser a mais útil para os outros mais tarde.
Ross,
2

O navegador imprime apenas a parte html, você pode colocar o elemento em um objeto para ver a estrutura da cúpula.

console.log({element})
Navid Shad
fonte