JavaScript: Tutorial - A Guide to JavaScript - Page 16

The Text Type

Text nodes are represented by the Text type and contain plain text that is interpreted literally and may contain escaped HTML characters but no HTML code. A Text node has the following characteristics:

• nodeType = 3
• nodeName = "#text"
• nodeValue is the text contained in the node
• parentNode is an Element
• Child nodes are not supported.

The following methods allow for manipulation of the text in the Text node:

• appendData(text) adds text to the end of the node
• deleteData(offset, count) removes count number of characters starting at position offset
• insertData(offset, text) inserts text at position offset.
• replaceData(offset, count, text) replaces the text starting at offset through offset + count with text.
• splitText(offset) splits the text node into two text nodes separated at position offset.
• substringData(offset, count) — Extracts a string from the text beginning at position >offset and continuing until offset + count.

Every element that may contain content will have at most one text node when content is present. Here is an example:

<!-- no content, so no text node -->
<div></div>
<!-- white space content, so one text node -->
<div> </div>
<!-- content, so one text node -->
<div>Hello World!</div>

When a reference to the text node is retrieved, it can be changed like this:

div.firstChild.nodeValue = "Some other message";

Creating Text Nodes

New text nodes can be created using the document.createTextNode() method.

var textNode = document.createTextNode("some text");

The next step is to add the text node to a node in the document tree.

var element = document.createElement("div");
element.id = "someDiv";
var textNode = document.createTextNode("some text");
element.appendChild(textNode);
document.body.appendChild(element);

When a element has more than one text node use the normalize() method of the element. normalize() takes no arguments.

Dynamic Scripts

Dynamically loading an external JavaScript file works as one would expect. Consider the following <script> element:

<script type="text/javascript" src="client.js"></script>

The DOM code to create this node is as follows:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "somescript.js";
document.body.appendChild(script);

The getElementsByClassName() Method

getElementsByClassName() returns a NodeList containing all elements that have all of the specified classes applied.

Focus Management

HTML5 adds functionality to aid with focus management of the DOM. document.activeElement which always contains a pointer to the DOM element that has current focus. Example:

var button = document.getElementById("currentButton");
button.focus();
alert(document.activeElement === button); //returns true

Markup Insertion

The innerHTML Property

The innerHTML property returns all the HTML representing the child nodes. In otherwords, it is the HTML code contained within the element. It is also for changing the HTML code contained within the element.

<div id="main">
<p>This is a paragraph and a list is next.</p>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
</ul>
</div>

alert(document.getElementById("main").innerHTML);
/* The inner HTML of the "main" element is as follows:
<p>This is a paragraph and a list is next.</p>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
</ul>
*/

To assign a new inner HTML value:

document.getElementById("main").innerHTML = "<p><strong>This is a new paragraph.</strong></p>"

The scrollIntoView() Method

scrollIntoView() scrolls the element into view when invoked.

document.forms[0].scrollIntoView();

Comment