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".|
|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.|
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>
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.
Nodes that represent text are called text nodes.
Nodes that represent attributes are called attribute nodes.
In the above example, all nodes are also children of the overall parent document node.