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:

Structure

In a html dom document:

Example

Base

<!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.

Domtree

where the tags are:

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.





Discover More
Browser
Browser - DOMContentLoaded event (page load)

DomContentLoaded is a page load event that signals that the parser has finished the construction of the DOM. The resources at the left or touching the blue line are blocking the construction of the DOM....
Browser
Browser - Document variable (DOM) - Javascript

In a browser, the document is: a DOM document (in-memory tree) of a XML document (generally a HTML dom document) The document is provided by the browser via its DOM webapi (Not by the Javascript...
CSS - (Implementation|Processing Model|Rendering)

How user agents may implements CSS. A user agent processes a source by going through the following steps: Parse the source document and create a document tree (CSSOM) Identify the target media...
DOM - AppendChild

AppendChild is a node dom tree operation that: adds (a new node) move (a node of the DOM tree) as children at the end of all already existing children of this node. where: returnedValue is:...
HTML - (Document) Parser

HTML documents consist of a tree of elements and text. The specification defines a set of elements that can be used in HTML, along with rules. If a document is transmitted with the text/html mime type,...
HTML - (Specification | API | Standard )

In HTML, there is two specifications: the - how to write an HTML document the API (dom) - how to build a DOM document from a HTML document and manipulate it The syntax is specified in the the...
HTML - Browsing context

A browsing context is a navigational context (environment) in which HTML document are rendered to the user. Each browsing context has: its own variable its own cookie its own dom and eventually...
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...
HTML - How to render SVG in HTML

How to render svg markup in a HTML page. You can render SVG markup via: object, embed, iframe, img, CSS background-image and svg inclusion. HTML A svgSVG element represents the root...
HTML - Manipulation

The DOM tree can be manipulated with scripts. Each element in the DOM tree is represented by an object, and these objects have APIs so that they can be manipulated. For instance, a link (e.g. the a element...



Share this page:
Follow us:
Task Runner