Core DOM and HTML DOM

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>
<html>

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

<body>
    <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>
</body>

</html>

<Image>

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.

<Image>

Text nodes

Nodes that represent text are called text nodes.

<Image>

Attribute nodes

Nodes that represent attributes are called attribute nodes.

<Image>

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

Note

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.