DOM Tree Visualizer
Free online DOM tree visualizer. Paste HTML and see how the browser parses it into element, text, and comment nodes, including the whitespace text nodes most people miss.
DOM Tree Visualizer
Free online DOM tree visualizer. Paste HTML and see how the browser parses it into element, text, and comment nodes, including the whitespace text nodes most people miss.
About the DOM tree
What the DOM is
When the browser loads a page, it parses your HTML into a tree of nodes called the DOM (Document Object Model). Each tag becomes an element node, the text between tags becomes text nodes, and comments become comment nodes. JavaScript then reads and changes the page by walking and editing this tree, not the original HTML string.
A string vs a tree
The HTML you write is just a sequence of characters. The browser turns it into a structured tree, and along the way it also creates nodes you did not type on purpose: the line breaks and indentation between tags become whitespace text nodes. Seeing them explains why childNodes often holds more than you expect.
FAQ
Common questions and answers about this topic.
What is the difference between childNodes and children?
children lists only element nodes; childNodes also includes text nodes (including whitespace) and comment nodes. That is why childNodes.length is often larger. This tool shows every node type so the gap is obvious.
Why are there so many whitespace nodes?
The line breaks and indentation you add to make HTML readable become text nodes in the DOM. They are real nodes, which can affect layout and DOM traversal. Minified HTML has far fewer of them.
Is my HTML sent to any server?
No. Parsing runs entirely in your browser with the built-in DOMParser, and nothing you paste leaves your device.