The DOM represents both XML documents and HTML documents. HTML documents are XML documents, but a little more specific. The Core DOM specification that is applicable to all XML documents, and HTML DOM specification extends and builds upon the core DOM. So the HTML DOM doesn't apply to all XML documents, but only to HTML documents.

Let's see some example of Core DOM and HTML DOM constructors.

Constructor Inherits from Core/ HTML Comment
Node   Core Any node on the tree.
Document Node Core The document object; the main entry point to any XML document
HTMLDocument Document HTML This is window.document or simply document, the HTML-specific version of the previous object, which you'll use extensively.
Element Node Core Every tag in the source is represented by an element. That's why you say "the P element" meaning "the <p></p> tag".
HTMLElement Element HTML General-purpose constructor; all constructors for HTML elements inherit from it.
HTMLBodyElement HTMLElement HTML Element representing the <body> tag.
HTMLLinkElement HTMLElement HTML An A element (an <a href="..." ></a> tag).
... HTMLElement HTML All the rest of the HTML elements...
CharacterData Node Core General-purpose constructor for dealing with texts.
Text CharacterData Core Text node inside a tag. In <em>second</em> you have the element node EM and the text node with value "second".
Comment CharacterData Core <!--anycomment-->
Attr Node Core Represents an attribute of a tag, In <p id="closer"> the id attribute is a DOM object created by the Attr() constructor.
NodeList   Core A list of nodes; an array-like object that has a length property.
NamedNodeMap   Core Same as above but the nodes can be accessed by name, not only by numeric index.
HTMLCollection   HTML Similar to above but specific for HTML.
DOM Tree

The DOM is made up of items called nodes , which can have parents, children, and siblings (just like a family), and this determines its position in the tree. Children are underneath parents and siblings are at the same level as other siblings (brothers and sisters).

<!DOCTYPE html>

    <meta charset="utf-8 ">
    <title>Basic DOM example</title>

    <h1>Hello World!</h1>
    <p>While this is a <strong>very basic HTML document</strong>, it actually serves as a detailed example of the document object model.</p>



In the above diagram, we create a parent-child relationship in the DOM by moving from the top of the document all the way to the bottom.

There are different types of nodes in the DOM.

Element nodes

Nodes that represent HTML elements are called element nodes. It's important to know the difference between these types of nodes when traveling throughout the DOM with JavaScript.


Text nodes

Nodes that represent text are called text nodes.


Attribute nodes

Nodes that represent attributes are called attribute nodes.


In the above example, all nodes are also children of the overall parent document node.

The document node is important and is used when building out the DOM's graphical representation. Whenever we want to access a node in the document, we first have to pass through the document node before we step down the tree and start any sort of interaction.
Related Tutorial
Follow Us #
Contents +