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.

Table
.......
Constructor
Inherits from
Core or 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
<!    -- any comment -->
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.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents