How is the DOM document build from an HTML document ?

About

This page is about the construction of the DOM document from a HTML document (ie the XML language is xhtml)

In a HTML context, the DOM is also known as the API for HTML.

Creation

The HTML dom document is created:

by an xml library
or by the browser at page load time. (See browser document)

Structure

In a html dom document:

the root node is the HTML node.
The html node contains two dom mandatory node:
- head
- and body
all DOM node are created from the sub html element, as well as a Text node between them.

Example

Base

The following html document

<!DOCTYPE html>
<html>
 <head>
  <title>My titel</title>
 </head>
 <body>
  <h1>My First chapter</h1>
  <p>My text and <a href="#link">my link</a></p>
  <!-- comment -->
 </body>
</html>

create the following DOM document where:
- The head element creates a head node that contains a title node, which itself contains a Text node with the text “My titel”.
- Similarly, the body element creates a body node that contains an h1 node, a p node, and a comment node.

where the tags are:

paragraph: <p>
heading tags: <h1> <h2> <h3> <h4> <h5> <h6>. There are six heading sizes from h1 to h6
image: <img> self-closes
hyperlinks (or just links): <a>

Second Example

Second example of HTML DOM tree

with the following HTML document

<!-- tells the browser what language it's reading -->
<!DOCTYPE html>
<!-- Starts the HTML document -->
<html>
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
<!-- Ends the HTML document -->
</html>

we would get the following html document. (not that \n is end of line)

DOCTYPE: html
html
    head
        #text: '\r   '
        title
            #text: Sample page
        #text: '\n   '
    #text: '\n  '
    body
        #text: '\n   '
        h1
            #text: Sample page
        #text: '\n   '
        p
            #text: 'This is a '
            a href="demo.html"
                 #text: simple
            #text: sample.
        #text: '\n   '
        #comment: this is a comment
        #text: '\n   '

Specification

The API for HTML developed by browser vendors were specified and published under the name:

DOM Level 1 (in 1998)
DOM Level 2 Core
and DOM Level 2 HTML.

To avoid exposing Web authors to the complexities of multithreading, the HTML and DOM APIs are designed such that the execution of all scripts is serialized.

An XML DTDs cannot express all the conformance requirements of this specification.

Shadow vs Light DOM

The light DOM is the HTML written by the user
While the shadow DOM is a DOM written by the browser

The shadow DOM is used to allow higher functionality such as custom element