The DOM tree includes HTML elements as objects. But it’s not just elements which get transformed to DOM objects. Even the text and the comments become part of the DOM tree as separate objects. All these objects are based on the Node interface. Here’s a list of all the 12 different node objects that we’ll see in a DOM tree.
Since, all these are objects based on the
Node interface, we get access to many
Node properties. For example, we can check
the name of the node
As can be seen in the console,
p is an element node. Whereas,
the text inside the
p is a text node. The
text node is a child of the
p element node. The
comment is also a node.
The DOM tree will look something like this: