DOM - Node

About

In DOM, every markup in an (XML|HTML) document is a node represented in a tree view.

Every DOM node has at least:

  • a type,
  • a name,
  • and a value, which might or might not be empty.

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"

Type

Node Type Children Node
Attr Text, EntityReference
CDATASection no children (ei XML cdata)
Comment no children
Document Element (maximum of one), ProcessingInstruction, Comment, DocumentType (maximum of one)
DocumentFragment Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
DocumentType no children
Element Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
Entity Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
EntityReference Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Notation no children (ie XML Notation)
ProcessingInstruction no children
DOM - Text (node) no children, no class, …

Management

Get

See How to select Node Elements ? (querySelector, querySelectorAll, )

Get type

With the DOM Web API, see en-US/docs/Web/API/Node/nodeType

Append

Remove

  • Pure Javascript
element.remove()
  • Jquery
// if not removed
if (jQueryElement.parent().length >0) {
    jQueryElement.remove();
}

See also: How to remove children

Move

DOM - AppendChild




Discover More
Browser Chrome Dom Elements Panel
Browser - DOM

This page is the DOM functionality in the browser. A browser has more object model (OM) To see the DOM in a browser, you use the devtools. The DOM is represented in the Elements panel. Example...
Domtree
DOM - (Node) Tree

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...
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 - 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:...
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 - Comments

comment is a type of node in the DOM It represents the parsing of a XML comment or HTML comment
DOM - Element

An element is the most common type of node in the DOM. When you want to do something to an element, first you need to select it. A dom element is generally the memory representation of: an HTML element...
DOM - Element content

Content is a type of node that represents a XML content element (and therefore also a HTML content element if the document type is HTML) ie API With the WebAPI DOM, the Element.innerHTML property...
DOM - Hierarchy

The nodes in the node tree have a hierarchical relationship to each other. An element A is said to be preceded or followed by a second element B if A and B have the same parent node and there are...



Share this page:
Follow us:
Task Runner