DOM Text and Comment Nodes

DOM Basics for HTML – Part 3

DOM for HTML

Foreword: In this part of the series, I talk about the attributes of the DOM text and comment nodes.

By: Chrysanthus Date Published: 13 May 2015

Introduction

This is part 3 of my series, DOM Basics for HTML. In this part of the series, I talk about the attributes of the DOM text and comment nodes. You should have read the previous parts of the series before reaching here; this is a continuation.

The Text Node
The text node has the following attributes:

data
This is the data text of the text node. Assume you have the following element in the document code:

    <h1 id='HS1'>Simple Page</h1>

This element has a text node whose data is the string “Simple Page”.

length
This attribute returns the length or number of characters in the data string. This is a readonly attribute, meaning that its value cannot be changed.

Accessing Attribute Value
The syntax to access the value of the attribute of a text node is:

    textNode.attribute

where textNode is the text node; and attribute is the attribute for the text node.

textContent
This attribute is for the parent element of the text node. It returns all the text of the parent node.

The following expression will access the data of the above h1 element:

    document.getElementById("HS1").textContent

document.getElementById("HS1") accesses the parent node. Note the use of the dot (.) operator in this expression, to separate one entity from another.

Read and try the following code that reads the length of a textContent and then changes the text content.

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    <h1 id='HS1'>Illustration</h1>
    <p id='P1'>This is a <a href="demo.htm">simple</a> sample.</p>
    

    <script type="text/ECMAScript">
        len = document.getElementById("HS1").textContent.length;
        alert(len);
        document.getElementById("HS1").textContent = "Simple Page";
    </script>

</body>
</html>

The first statement in the script, reads the length of the text in the h1 element. The third statement changes the data. When you try the code, you will have to click the OK button of the alert box, to dismiss the box.

Case Sensitivity
Note: DOM attribute names and method names are case sensitive. This means that textContent is not the same as textcontent.

The Comment Node
Like the text node, the comment node (or comment element) does not have an ID. The comment node has the same attributes like the text node. At the moment, it is not a straightforward business to access the data of a text or comment node – see below for a workaround.

Child NodeList
Consider the element:

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

The p node has three child nodes: the first childnode with data, “This is a ”; the second childnode which is the a element node; and the third childnode with data “ sample.”. So, one way to access the text nodes is to get a collection (array) of references to the child nodes, called a NodeList. Knowing the position of the reference of a text node, in the node list, you can then manipulate the data of the text node. In the following code the data for each child node of the p element is displayed:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body id="B1" style="color:darkblue">
    <h1 id='HS1'>Illustration</h1>
    <p id="P1">This is a <a href="demo.htm">simple</a> sample.</p>
    

    <script type="text/ECMAScript">
        collection = document.getElementById('P1').childNodes;
        for(i=0; i<collection.length; ++i)
            {
                childNode = collection[i];
                alert(childNode.data);
            }
    </script>

</body>
</html>

In the script, the first line returns the collection. In the block of the for-loop, the first line assigns the reference of a node to the variable, childNode. The next line displays the text data value using the data attribute of the node. In this case, for a text node, the text data is displayed; for the a element node, nothing is displayed.

Instead of displaying the data of the text nodes, you could have displayed the length (number of characters) of the data, using the expression:

    childNode.length

With this the a element node will still display nothing.

You can use this technique to display the text data of a comment. In the above HTML document, the comment node is a child of the body node. The comment node is like a text node. The following code displays the text data of any text node that is a child of the body node and the text data of any comment node that is a child of the body node. For nodes that are not text nodes or comment nodes, no text data is displayed (there is only one comment node in the document code):

<!DOCTYPE HTML>
<html>
<head>
    <title>Simple Page</title>
</head>
<body id="B1" style="color:darkblue">
    <h1 id='HS1'>Simple Page</h1>
    <p id="P1">This is a <a href="demo.htm">simple</a> sample.</p>
    

    <script type="text/ECMAScript">
        collection =  document.getElementById('B1').childNodes;
        for(i=0; i<collection.length; ++i)
            {
                childNode = collection[i];
                alert(childNode.data);
            }
    </script>

</body>
</html>

Try the code.

The textContent and data Attributes
The textContent attribute is for element node. It returns the text of any text child node and comment child node and descendant text and comment nodes. For the paragraph element,

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

the textContent attribute will return:

        This is a simple sample.

Here, “This is a ” is of a child text node; “simple” is of a grandchild text node and “ sample.” is of a child text node.

The data attribute returns the text of only a text node or a comment node; it does not deal with element nodes directly.

Now, the syntax,

        textContent.length

is the number of characters of the string returned by textContent of an element node, while the syntax,

        data.length

is the number of characters of the string returned by data of a text (or comment) node.

Modifying the Text Data
It is now possible to modify the data of any text node and the changes will be seen while the web page is displayed. This feature can be used for games and interactive tutorials. This is possible because a text or comment node has the methods given below. Consider the element:

    <h1 id='HS1'>Simple Page</h1>

appendData(data)
This method appends (adds) text to the end of the data of a text node (or comment node). The above element has a text node whose data is, Simple Page. This method can be used to append the text “ Today” to the text, “Simple Page” so that the result is, “Simple Page Today”.

insertData(offset, data)
This method inserts text within the data of a text node (or comment node). The above element has a text node whose data is, Simple Page. This method can be used to insert the text “ Good” to the text, “Simple Page” so that the result is, “Simple Good Page”.

deleteData(offset, count)
This method deletes the text data of a text node (or comment node). The above element has a text node whose data is, Simple Page. This method can be used to delete the text “Simple ” from the text, “Simple Page” so that the result is, “Page”.

replaceData(offset, count, data)
This method replaces part of text data of a text node (or comment node). The above element has a text node whose data is, Simple Page. This method can be used to replace the text “ple” of the text, “Simple Page” with the text “ilar” so that the result is, “Similar Page”.

substringData(offset, count)
This method returns a sub string of the text data. The above element has a text node whose data is, Simple Page. This method can be used to return the substring, “le Pa” from within the data. The original text data stays unchanged.

To use the attribute or method of a node, you need to have a reference to that node. An element can have more than one text node. In this case, you need to have a collection of all the text nodes and then scan through the collection to obtain the reference you want. That is not very convenient. However if an element like the h1 element above, has only one text node, then the collection obtain will have only one reference, and you will conveniently access the attributes and methods of the text node.

To obtain the references of the text nodes and comment nodes of an element, you have to use the expression:

    document.getElementById('ID').childNodes

where ID is the ID of the Element tag. Here, the part of the expression, “document.getElementById('ID')” accesses the reference of the node of the parent element and the part “childNodes” accesses or returns the references of the text (or comment) nodes. Actually “childNodes” returns a collection of the references of all child nodes and not just text or comment nodes. If you have just one node, which is a text node or comment node, then your coding will be convenient.

offset
Consider the following string:

    "Simple Page"

S is at index 0; i is at index 1; m is at index 2, until the last e is at index 10. You can similarly say, the offset of S is 1 from the left end of the string; the offset of i is 2; the offset of m is 3; until the offset of the last e is 11. Offset is the number of characters you skip from the left end.

count
The number of any sequence of characters within a string is called count. Remember, the space is a character. So “ple P” from the above string has a count of 5.

Note, when any of the above methods are executed, the effect takes place at the web page.

The following code illustrates the use of the above text node (comment node) methods; it does so by carrying out the changes mentioned above, in the text node of the h1 element. As you read the code, note how the arguments have been typed in the method calls.

<!DOCTYPE HTML>
<html>
<head>
    <title>Simple Page</title>
</head>
<body id="B1" style="color:darkblue">
    <h1 id='HS1'>Simple Page</h1>
    <p id="P1">This is a <a href="demo.htm">simple</a> sample.</p>
    

    <script type="text/ECMAScript">

        collection = document.getElementById('HS1').childNodes;
        childNode = collection[0];

        childNode.appendData(" Today");
        childNode.textContent = "Simple Page";

        childNode.insertData(6, " Good");
        childNode.textContent = "Simple Page";

        childNode.deleteData(0, 7);
        childNode.textContent = "Simple Page";

        childNode.replaceData(3, 3, "ilar");
        childNode.textContent = "Simple Page";

        subStr = childNode.substringData(4, 5);
        alert(subStr);
    </script>

</body>
</html>

Try the code, if you have not already done so. At the end, it is still Simple Page that is displayed for the h1 element. This is because, for each code segment, the change is set back to the initial text The first code segment in the script has the effect of assigning the reference of the text node of the h1 element to the variable, childNode. For the rest of the script the reference of the text node is held by childNode. The second code segment appends data and then put back the original text node data. The third code segment inserts data and then put back the original text node data. The fourth code segment deletes data and then put back the original text node data. The fifth code segment (one line) replaces data and then put back the original text node data. The first code segment returns and displays a substring from the text data. The original text data remains unchanged. The substring is obtained from position (index + 1) 5 to 9.

wholeText
The text node has an extra attribute called, the wholeText attribute. It returns the combined data of all direct text node siblings.

splitText(offset)
The text node has an extra method called, splitText(offset). This method splits data at the given offset and returns the remainder as text node.

The following code illustrates the use of the wholeText attribute and the splitText(offset) method (do not forget to click the OK button of the alert boxes that appear).

<!DOCTYPE HTML>
<html>
<head>
</head>
<body id="B1" style="color:darkblue">
    <p id="P1">This is a <a href="demo.htm">simple</a> sample.</p>

    <script type="text/ECMAScript">

        collection = document.getElementById('P1').childNodes;
        aChildNodeRef = collection[0];
        wholetext = aChildNodeRef.wholeText;
        alert(wholetext);

        newTextNode = aChildNodeRef.splitText(6);
        alert(newTextNode.data);

    </script>

</body>
</html>

The splitText() method actually splits the text node into two nodes. If the value of the offset is 0, then the returned node (reference) will have the whole text, while the remaining node will have no text.

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

Chrys

Broad Network

Related Articles

DOM Text and Comment Nodes

DOM Basics for HTML – Part 3

DOM for HTML

Introduction

Related Links

Comments