DOM Node Basics

DOM Basics for HTML – Part 5

DOM for HTML

Foreword: In this part of the series, I talk about the basics of DOM nodes. Remember, a node is a software object in memory.

By: Chrysanthus Date Published: 13 May 2015

Introduction

This is part 5 of my series, DOM Basics for HTML. In this part of the series, I talk about the basics of DOM nodes. Remember, a node is a software object in memory. All elements in a web page (displayed), have equivalent nodes in memory. However, not all nodes have equivalent elements in the HTML document code. In this tutorial, I talk about some attributes and methods of nodes in general.

Text Node
A text node is for the text of an element. The text node does not have an equivalent element in the HTML document code. Its data attribute holds the text of the text node. This data can be all or part of the text for the HTML element.

When you create a document using HTML tags, text nodes are inherent in the document. However, you can create a text node that does not belong to any document; after that you can attach the text node to a document (DOM tree). The syntax to create such a text node is:

    text = new Text([data])

where data is a string in quotes. text is a variable that holds the reference of the node; you can still say text is the node. The square brackets mean that the string for data is optional. If you do not include it, the text data for the node will be empty.

I explain how to attach nodes to a DOM (node) tree, below:

Comment Node
A comment node is for the comment element. The comment tag in the HTML document code does not have an ID. The comment tag has a corresponding node in memory. Like the text node, it has a data attribute. Its data attribute holds the text of the comment.

When you create a document using HTML tags, the comment node is inherent in the document. However, you can create a comment node that does not belong to any document; after that you can attach the comment node to a document (DOM tree). The syntax to create such a comment node is:

    comment = new Comment([data])

where data is a string in quotes. comment is a variable that holds the reference of the node; you can still say comment is the node. The square brackets mean that the string for data is optional. If you do not include it, the text data for the node will be empty.

I explain how to attach nodes to a DOM (node) tree, below:

Element Node
An element is coded with HTML tags in the document. Any element has an equivalent node in the computer’s memory, while the page is displayed. Most elements can be coded with an ID. The same ID appears in the element’s node in memory. To access any element node, use the syntax:

    document.getElementById('ID')

Everything being equal, you cannot access a non-element node in this way. You can create an element node that does not have any equivalent HTML tag in the document code. The syntax is:

    nod = document.createElement(localName)

Here, nod is a variable of your choice; it holds the reference returned by the method. nod  can be used to add attributes such as the ID to the element node. LocalName is the HTML tag name in quotes, e.g. 'p' for the paragraph element. You still have to attach nod to another element node (node tree) - see below. In this syntax, document, is a node, but it does not have any equivalent HTML element.

Attaching Child Nodes
Element nodes and non-element nodes can be attached as children nodes to a parent element node. Such nodes attached, if created in the DOM, do not have equivalent HTML tags. While such a node is not attached, it does not belong to any document if it was created with the “new” expression. If it was created with the document.createElement() expression, it would belong to document, but it would not be a child node of any element.

The following node methods can be used to attach a child node.

    appendChild(node);
    insertBefore(node, child);
    replaceChild(node, child);
    removeChild(child);

The appendChild() method adds a new child node to the current node, which becomes the parent node for the child. The argument is a reference (variable) to the child node. If there where already child nodes for the element, then the one added will go to the end of the list.

The insertBefore() method inserts a child node before another child node of the parent (current) node. The first argument is a reference to the child node in front of which you want to insert the new child note.

The replaceChild() replaces the child node in question. The first argument of the method is a reference to the child node to be replaced. The second argument is the new child node (reference). The current node is the parent node.

The removeChild() method completely removes the child node in question. The argument is the child node to be removed. The current node is the parent node.

Note: the appendChild() method can be used to attached all the children, if the sibling list is empty.

Child Node Collection
Whether a node was created with HTML tags or the DOM, the references of all children nodes of a particular element can be read and sent to a collection. A collection is a special type of array. In this case, each reference in the collection is for a child node. You can call the references, nodes.

Assume that you have the following HTML tags in the body element:

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

The following script statement will return a collection of three nodes. The first node is a text node, with data, “This is a ”; the second node is a node for the a element. The third node is a text node with data, “ sample.”.

        collection = document.getElementById('P1').childNodes;

childNodes is a readonly attribute for all nodes. document.getElementById('P1') is for the reference (node) of the parent element. collection is a variable name of your choice.

Obtaining Nodes One-by-One
You do not always have to read the child nodes into a collection. You can read the nodes one-by-one using the following node readonly attributes.

  firstChild
  lastChild
  previousSibling
  nextSibling

Child nodes are attached to a parent node in the form of a list. So, firstChild is for returning the reference of the first child in the list. lastChild is for returning the reference of the last child in the list. previousSibling is for returning a previous sibling child reference. nextSibling is for returning the reference of the next child in the list. To return a reference, you would type something like:

    nod = document.getElementById('ID').nextSibling;

where nod is the reference of the sibling returned. document.getElementById('ID') is for the parent node. nextSibling or any of the above attributes is for the sibling of interest.

Code Example
The following code creates a paragraph node and its contents, only in the DOM. The paragraph and its contents do not have any equivalent HTML tags. The code then goes on to display the attribute values of the paragraph’s content nodes by using the collection and by using the sibling attributes. Read through the code and note how the arguments of the methods have been typed.

<!DOCTYPE HTML>
<html>
<head>
    <title>Simple Page</title>
</head>
<body id="B1" style="color:darkblue">

    <script type="text/ECMAScript">
        //create the nodes and attributes
        elementNodeP = document.createElement("p");
        elementNodeP.id = 'P1';
        textNode1 = new Text("This is a ");
        elemenNodeA = document.createElement("a");
        elemenNodeA.setAttribute("href", "demo.htm");
        textNodeA = new Text("simple");
        textNode2 = new Text(" sample.");

        //attach the nodes
        elementNodeP.appendChild(textNode1);
        elemenNodeA.appendChild(textNodeA);
        elementNodeP.appendChild(elemenNodeA);
        elementNodeP.appendChild(textNode2);
       document.getElementById('B1').appendChild(elementNodeP);

        collection = document.getElementById('P1').childNodes;
        alert(collection[0].textContent);
        alert(collection[1].href);
        alert(collection[2].textContent);

        firstNode = document.getElementById('P1').firstChild;
        alert(firstNode.textContent);
        lastNode = document.getElementById('P1').lastChild;
        alert(lastNode.textContent);
    </script>

</body>
</html>

Note that in the attachment of the nodes, the content nodes of the paragraph are first attached to the paragraph node before the paragraph node is attached to the body node.

Try the code and note that the creation attachment of a node takes effect (becomes seen) as it is created.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

DOM Node Basics

DOM Basics for HTML – Part 5

DOM for HTML

Introduction

Related Links

Comments