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

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...
Browser / DOM - Range - defining a sequence of characters

Range is a function that permits defining a sequence of characters in the DOM tree and is used in selecting and copying content.
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.



Share this page:
Follow us:
Task Runner