javascript

Chapter 10: The Document Object Model
In addition to these methods, the length property returns the number of characters in the node. This
value is the same as using nodeValue.length or data.length .
By default, 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 >
The first < div > element in this code has no content, so there is no text node. Any content between the
opening and closing tags means that a text node must be created, so the second < div > element has a
single text node as a child even though its content is white space. The text node ’ s nodeValue is a single
space. The third < div > also has a single text node whose nodeValue is “ Hello World! ” . The following
code lets you access this node:
var textNode = div.firstChild; //or div.childNodes[0]
Once a reference to the text node is retrieved, it can be changed like this:
div.firstChild.nodeValue = “Some other message”
As long as the node is currently in the document tree, the changes to the text node will be reflected
immediately. Another note about changing the value of a text node is that the string is HTML - or XML -
encoded (depending on the type of document), meaning that any less - than symbols, greater - than
symbols, or quotation marks are escaped as shown in this example:
//outputs as “Some & lt;strong & gt;other & lt;/strong & gt; message”
div.firstChild.nodeValue = “Some < strong > other < /strong > message”;
This is an effective way of HTML - encoding a string before inserting it into the DOM document.
The Text type constructor and prototype are accessible in script in all browsers, including Internet
Explorer beginning with version 8.
Creating Text Nodes
New text nodes can be created using the document.createTextNode() method, which accepts a single
argument — the text to be inserted into the node. As with setting the value of an existing text node, the
text will be HTML - or XML - encoded as shown in this example:
var textNode = document.createTextNode(“ < strong > Hello < /strong > world!”);
When a new text node is created, its ownerDocument property is set, but it does not appear in the
browser window until it is added to a node in the document tree. The following code creates a new
< div > element and adds a message to it:
290