Document Object Model

Components of DOM Tree

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 using the Node.nodeName property:

As can be seen in the console, the 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: