Print the entire item returned by getElementById

If I am debugging some javascript code and I want to see where I am in the DOM, how can I print the whole element returned by (say) getElementById ()? I know I can print the field:

attrib = document.getElementById("attrib-2"); alert(attrib.selectedIndex); 

but if I want to print everything (even children), what can I do?

+4
source share
4 answers

Warning is not the best option for debugging purposes. Consider using some specially designed tools, such as FireBug in Firefox, and developer tools in WebKit browsers. Then use the console.log method to see some of the data you need in a highly readable format.

 attrib = document.getElementById("attrib-2"); console.log(attrib.selectedIndex); 
+2
source
 foreach (k in attrib){ if (typeof attrib[k]!='function'){ console.log(attrib[k]); } } 
+1
source
 console.log(attrib) 

and then check your browser console (F12 in most browsers)

0
source

To print the whole element, you need console.dir :

 var attrib = document.getElementById("attrib-2"); console.dir(attrib); 

This way you can check the whole object. Click on the arrows next to the properties of the object to expand or collapse them.

0
source

All Articles