How is the DOM Document build from an HTML document ?
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.
The HTML dom document is created:
- by an xml library
- or by the browser at page load time. (See browser document)
In a html dom document:
- The html node contains two dom mandatory node:
- and body
- all DOM node are created from the sub html element, as well as a Text node between them.
- 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
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 '
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.