Comment puis-je enregistrer un élément HTML en tant qu'objet JavaScript?
En utilisant Google Chrome, si vous console.log un objet, il vous permet d'inspecter l'élément dans la console. Par exemple:
var a = { "foo" : "bar", "whiz" : "bang" };
console.log(a);
Cela affiche Object qui peut être inspecté en cliquant sur les flèches à côté de lui. 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 champs) au lieu de simplement le DOM de l'élément, comment faire?
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 dir au lieu de console.dir:
dir(element); // logs the element’s properties and values
Pour simplement lister 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 méthode publique console.keys(), si vous êtes déjà dans la console, vous pouvez simplement entrer:
keys(element); // logs the element’s property names
Cependant, cela ne fonctionnera pas en dehors de la fenêtre de la console.
essaye ça:
console.dir(element)
Référence
[Vidéo] Paul Irish en devenant un utilisateur expérimenté de la console.