Node Relationship and Node Types

DOM Basics for HTML – Part 2

DOM for HTML

Foreword: In this part of the series I talk about the relationship between nodes and the different types of nodes.

By: Chrysanthus Date Published: 13 May 2015

Introduction

This is part 2 of my series, DOM Basics for HTML. In this part of the series I talk about the relationship between nodes and the different types of nodes. You should have read the previous part of the series before reaching here, as this is the continuation. While a web page is displayed, each HTML element has a corresponding object in memory called the DOM object. Such an object is also called a node. A node is a DOM object in memory. However, not all nodes have corresponding elements at the web page.

I will use the following document code and corresponding DOM tree for explanation. A document code consists of elements. A tree consists of nodes.

<!DOCTYPE html>
<html>
<head>
  <title>Simple Page</title>
</head>
<body>
  <h1>Simple Page</h1>
  <p>This is a <a href="demo.htm">simple</a> sample.</p>
  
</body>
</html>

|_DOCTYPE: html
|
|_html
    |
    |_head
    |   |
    |   |_text: \n sp sp
    |   |
    |   |_title
    |   |   |
    |   |   |_text: Simple Page
    |   |
    |   |_text: \n sp
    |
    |_text: \n sp
    |
    |_body
        |
        |_text: \n sp sp
        |
        |_h1
        |   |
        |   |_text: Simple Page
        |
        |_text: \n sp sp
        |
        |_p
        |   |
        |   |_text: This is a
        |   |
        |   |_a href="demo.htm"
        |   |   |
        |   |   |_text: simple
        |   |
        |   |_text:  sample.
        |
        |_text: \n sp sp
        |
        |_comment: this is a comment
        |
        |_text: \n sp \n

Relationship between Nodes

Tree order
A tree is a finite hierarchical tree structure. In tree order is preorder, depth-first traversal of a tree. This means, at any point, you go down and branch to the right of the first branch you meet. Go down and branch to the right; continue like that until you reach a leaf. Then return to the last node of the branch that has a growth downward. Go down and branch to the right of the first branch you meet. Continue like that until you reach the bottom of the tree.

Parent
A node that participates in a tree has a parent, which is either another node or null, and an ordered list of zero or more child nodes. A node A whose parent is object B is a child of B. So, in the tree, the text node with data “simple” has parent, a, which has the parent, p. In the tree, DOCTYPE is the only node that has a parent that is null; any other node has a node parent. Note: null means nothing.

The Root Node
The root of a node is itself, if its parent is null, or else it is the root of its parent. In the tree. html is the root element and not the root node (the DOCTYPE tag in the document code is not really a conventional element).

Descendant
A node A is called a descendant of a node B, if either A is a child of B or A is a child of a node C that is a descendant of B.

Inclusive Descendant
An inclusive descendant is a node itself or one of its descendants.

Ancestor
A node A is called an ancestor of a node B if and only if B is a descendant of A.

Inclusive Ancestor
An inclusive ancestor is a node itself or one of its ancestors.

Sibling
A node A is called a sibling of a node B, if and only if B and A share the same non-null parent. In the tree, for the paragraph (p) branch, the text node with the data “This is a ” and the node, a, and the text node with the data “ sample.” are siblings.

Preceding Node
A node A is preceding a node B if A and B are in the same tree and A comes before B in tree order.

Following Node
A node A is following a node B if A and B are in the same tree and A comes after B in tree order.

First Child
The first child of a node is its first child or null if it has no child. The first child of the p node in the tree is, the text node with the data “This is a ”.

Last Child
The last child of a node is its last child or null if it has no child. The last child of the p node in the tree is, the text node with the data “ sample.”.

Previous Sibling
The previous sibling of a node is its first occurred preceding sibling (moving backward) or null if it has no preceding sibling.

Next Sibling
The next sibling of a node is its first occurred following sibling (moving forward) or null if it has no following sibling.

Index
The index of a node is its number of preceding siblings i.e. the position of the sibling minus 1. In the p branch in the tree, the text node with data “This is a ” is the sibling with index 0; the node, a is the sibling with index 1; and the text node with data “ sample.” is the sibling with index 2.

Types of Node

The names of the different types of node are Text, Comment, Element, DocumentType, Document, DocumentFragment, and ProcessingInstruction. I spend the rest of this tutorial giving you the meanings of these types of node.

Text Node
As seen in the previous part of the series, there are two types of text nodes: the one whose data is content of an element and the one that is whitespace. These two types can be found in the above tree. An example for the one whose data is content of an element is the text node for the a element. An example of whitespace text node in the tree is \n sp sp.

Comment Node
The comment node is the object in memory of the comment tag (element). If the comment tag is,

  

then the text data for the comment node is “this is a comment”.

Element Node
The element node is the object in memory that represents the HTML tag element in the document code. The p element has a p node in memory; the a element has the a node in memory; the title element has the title node in memory; and so on.

DocumentType Node
The DOCTYPE tag has an object in memory, which is the DocumentType node.

Document Node
A document has the html element. The html element should have the head and the body elements. It is recommended that the head element has at least the title element. The body element can be empty, but that will not give you a practical document. There is an object in memory called the document node. There is no corresponding element in the document called the document; you just have to accept that.

DocumentFragment
Now, if you type only the following in a text editor and save the file as an html file, when the file is displayed, you will see the paragraph element and its content at the web page.

  <p>This is a <a href="demo.htm">simple</a> sample.</p>

This is not a complete document; it is a document fragment. Its tree is:

        p
         |
         |_text: This is a
         |
         |_a href="demo.htm"
         |   |
         |   |_text: simple
         |
         |_text:  sample.

The root of any node below p in the tree is the p node. The p node has no parent; that is, the parent of the p node is null.

ProcessingInstruction Node
Another node, which does not have a corresponding element in the document code, is the ProcessingInstruction node. It is an object in memory, whose purpose is to manipulate nodes that have text data. It can be used to delete the text data of a text node; it can be used to insert text data within the text data of a text node; it can be used to append text data to the text data of a text node; it can be used to replace text data within text data of a text node. The ProcessingInstruction node can also be used to manipulate the comment node.

In this part of the series, you have seen the relationship between nodes and you have seen the different types of node. Let us stop here; take a break; and continue in the next part of the series.

Chrys

Broad Network

Related Articles