Comment puis-je enregistrer un élément HTML en tant qu'objet JavaScript?

90

En utilisant Google Chrome, si vous êtes console.logun objet, il vous permet d'inspecter l'élément dans la console. Par exemple:

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

Ceci imprime Objectqui peut être inspecté en cliquant sur les flèches à côté. Si toutefois j'essaye de connecter un HTMLElement:

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

Ceci imprime <html></html>qui ne peut pas être inspecté en cliquant sur les flèches à côté. Si je veux voir l'objet JavaScript (avec ses méthodes et ses champs) au lieu du seul DOM de l'élément, comment puis-je faire cela?

— Ben Flynn
source

164

Utilisez 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 vous êtes déjà dans la console, vous pouvez simplement taper dirau lieu de console.dir:

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

Pour lister simplement les différents noms de propriétés (sans les valeurs), vous pouvez utiliser Object.keys:

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

Même s'il n'y a pas de console.keys()méthode publique , si vous êtes déjà dans la console, vous pouvez simplement entrer:

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

Cela ne fonctionnera pas en dehors de la fenêtre de la console.

— Mathias Bynens
source

Lorsque j'utilise console.dir () directement dans la console, cela fonctionne. Mais si je l'écris dans mon fichier .js réel dans VS Code, la console de développement chrome enregistre simplement le nom du fichier dans lequel il a été écrit et le numéro de ligne. Tu sais pourquoi?

— Maiya

27

essaye ça:

console.dir(element)

Référence
[Vidéo] Paul Irish sur le fait de devenir un utilisateur puissant de la console.

— Ross
source

+1 J'utilisais toujours [[element]]pour créer un tableau afin que Chrome soit obligé de l'afficher comme un objet ... Merci!

— pimvdb

Excellente réponse simple. Par type «le plus ancien» est venu un cheveu après l'autre, d'où l'acceptation, mais merci beaucoup!

— Ben Flynn

Pas de problème. Cela ne me dérange pas de savoir ce qui est accepté, mais la réponse acceptée devrait être celle qui sera la plus utile aux autres plus tard.

— Ross

1

Le navigateur n'imprime qu'une partie html, vous pouvez placer l'élément dans un objet pour voir la structure du dôme.

console.log({element})

— Navid Shad
source