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

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