DOM - (Node) Tree

About

The DOM presents an (XML|HTML) document as a tree-structure.

A DOM has a standard tree structure, where each node contains one of the components from an XML structure.

Generally, the vast majority of nodes in a DOM tree will be Element and Text nodes.

The two most common types of nodes are:

The nodes in the node tree have a hierarchical relationship to each other.

See also the root node

Example

<html>
  <head>
    <title>My Title</title>
  </head>
  <body>
    <h1>My First chapter</h1>
    <p>My Text and<a href="gerardnico.html">My Link</a></p>
  </body>
</html> 

Domtree

DOC: nodeName="#document"
  ELEM: nodeName="html" local="html"
    ELEM: nodeName="head" local="head"
      ELEM: nodeName="title" local="title"
        TEXT: nodeName="#text" nodeValue="My Title"
    ELEM: nodeName="body" local="body"
      ELEM: nodeName="h1" local="h1"
        TEXT: nodeName="#text" nodeValue="My First chapter"
      ELEM: nodeName="p" local="p"
        TEXT: nodeName="#text" nodeValue="My Text and"
        ELEM: nodeName="a" local="a"
            ATTR: nodeName="href" local="href" nodeValue="gerardnico.html"
              TEXT: nodeName="#text" nodeValue="gerardnico.html"
          TEXT: nodeName="#text" nodeValue="My Link"

Traversal operation

see DOM - Traversal





Discover More
Dom Attribute Set To Color Red
Attribute manipulation with DOM

How to add, delete, get any node attribute with 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...
Browser
Browser - Rendering ( HTML Latency)

Rendering is a page load phase that consists of generating an output that can be read by the client. Render tree building stage: The CSSOM and DOM trees are combined into a render tree. Before the...
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 - API

The DOM API is a specification that specifies all classes and function to manipulate the DOM tree. The DOM API is present natively in browser and may be implemented via a library in other application/environment....
DOM - Body

The body node in the DOM tree represents the HTML body element. You access the body node via the document node as property. Example: getComputedcomputed style value Document/body
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
DOM - Document (Object)

Every XML doc and HTML document (Web page) in an HTML UA is represented by a TR/html5/dom.htmlDocument object. A document in the context of a browser is generally a HTML document (Web Page). The Document...
DOM - Entity Node

Entity processing in the DOM. Like Attribute nodes, Entity nodes do not appear as children of DOM nodes.
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...



Share this page:
Follow us:
Task Runner