Menu
This is something that's been driving me nuts for a while. When I console.log a DOM node (returned by example from document.getElementById), it appears as an interactive html element, as it would appear on the "Elements" tab.
This can be handy for sure, but there are times when I just want to be able to expand the object and see all of its properties, like I can do for every other kind of object I log to the console.
Is there any way I can get a DOM node to display in the console as a regular object??
579
So, in a nutshell, a node is any DOM object. An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...). The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling.
Chrome (and I suspect Safari) can show attached event listeners when you select an element in the DOM and then scroll down the right sidebar to the Event Listeners section.
Inserting Nodes into the DOM The methods appendChild() and insertBefore() are used to add items to the beginning, middle, or end of a parent element, and replaceChild() is used to replace an old node with a new node.
In the context of the DOM, a node is a single point in the node tree. Various things that are nodes are the document itself, elements, text, and comments.
Use console.dir instead of 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(object)
Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.
Chrome supports console.dir as well, as shown here (not shown as a property of console, but it is available).
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
