2011-10-13 1 views
12

C'est quelque chose qui me rend fou depuis un moment. Lorsque je console.log un noeud DOM (retourné par l'exemple de document.getElementById), il apparaît comme un élément html interactif, tel qu'il apparaîtrait dans l'onglet "Eléments". Cela peut être pratique, mais il y a des moments où je veux juste pouvoir développer l'objet et voir toutes ses propriétés, comme je peux le faire pour tous les autres types d'objets que je connecte à la console.Le nœud DOM de la console Safari/WebKit en tant qu'objet?

Y a-t-il comme je peux obtenir un noeud DOM à afficher dans la console comme un objet régulier ??

Répondre

24

Utilisez console.dir au lieu 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 (objet)

imprime une fiche interactive de toutes les propriétés de l'objet. Cela semble identique à la vue que vous verriez dans l'onglet DOM.

Chrome prend en charge console.dir ainsi, as shown here(non représenté comme une propriété de console, mais il est disponible).

enter image description here

+0

Incroyable! Malgré mes recherches et la lecture des docs d'Apple, console.dir n'était mentionné nulle part, mais cela fonctionne parfaitement! – devios1

+1

@chaiguy: Je dois admettre que je suis vraiment content que vous ayez posé cette question. Je me suis toujours demandé la même chose, mais je ne l'ai jamais cherché. Je doublerais toujours mes éléments dans des tableaux, comme '[[document.body]]'. Cela fonctionne, mais vous devez développer le tableau interne pour accéder à l'objet élément. 'dir' est beaucoup plus agréable! : o) – user113716

+0

L'ironie est que je pourrais avoir juste console-connecté 'console' et vérifié son prototype. J'aime JavaScript. :) – devios1

Questions connexes