Text Nodes

You also can handle text in web pages in terms of text nodes. The Netscape Navigator and W3C implement text nodes as Text objects, and the Internet Explorer implements them as TextNode objects. These objects are similar but, of course, not identical. You can see the properties of the Text object in Table 11.22 and its methods in Table 11.23. And you can find the properties of the TextNode object in Table 11.24 and its methods in Table 11.25.

Table 11.22. The Properties of the Text Object

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
attributes		See Chapter 5.
childNodes		See Chapter 5.
data				x
		Read/write
		This property holds the text in the node, as a string.
firstChild		See Chapter 5.
lastChild		See Chapter 5.
length		See Chapter 5.
localName		See Chapter 5.
namespaceURI		See Chapter 5.
nextSibling		See Chapter 5.
nodeName		See Chapter 5.
nodeType		See Chapter 5.
nodeValue		See Chapter 5.
ownerDocument		See Chapter 5.
parentNode		See Chapter 5.
prefix		See Chapter 5.
previousSibling		See Chapter 5.

Table 11.23. The Methods of the Text Object

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
appendChild	See Chapter 6.
appendData				x
	Returns: Nothing
	Appends text to a text node.
	Syntax: appendData( text ) , where text is the text to append to the text node.
cloneNode	See Chapter 6.
deleteData				x
	Returns: Nothing
	Syntax: deleteData( offset , length ) , where offset is the offset at which to start deleting, and length is the number of characters to delete.
hasChildNodes	See Chapter 6.
insertBefore	See Chapter 6.
insertData				x
	Returns: Nothing
	Inserts text into a text node.
	Syntax: insertData( offset , text ) , where offset is the offset (in characters) at which to insert the text, and text is the text to insert.
normalize	See Chapter 6.
removeChild	See Chapter 6.
replaceChild	See Chapter 6.
replaceData				x
	Returns: Nothing
	Replaces text.
	Syntax: replaceData( offset, length, text ) , where offset is the offset at which to replace text, length is the length of text to replace, and text is the new text.
splitText				x
	Returns: Text node
	Splits the text in a node.
	Syntax: splitText( offset ) , where offset gives the location at which to split the text. This method truncates the original text to offset in length, and returns the second part of the text.
substringData				x
	Returns: String
	Gets a substring.
	Syntax: substringData( offset , length ) , where offset is the offset at which to get the text, and length is the length of the text to get. Returns the substring.

Table 11.24. The Properties of the TextNode Object

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
data								x	x	x
		Read/write
		This property holds the text in the node, as a string.
length		See Chapter 5.
nextSibling		See Chapter 5.
nodeName		See Chapter 5.
nodeType		See Chapter 5.
nodeValue		See Chapter 5.
ownerDocument		See Chapter 5.
parentNode		See Chapter 5.
previousSibling		See Chapter 5.

Table 11.25. The Methods of the TextNode Object

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
appendData										x
	Returns: Nothing
	Appends text to a text node.
	Syntax: appendData( text ) , where text is the text to append to the text node.
deleteData										x
	Returns: Nothing
	Syntax: deleteData( offset , length ) , where offset is the offset at which to start deleting, and length is the number of characters to delete.
insertData										x
	Returns: Nothing
	Inserts text into a text node.
	Syntax: insertData( offset , text ) , where offset is the offset (in characters) at which to insert the text, and text is the text to insert.
replaceData										x
	Returns: Nothing
	Replaces text.
	Syntax: replaceData( offset , length , text ) , where offset is the offset at which to replace text, length is the length of text to replace, and text is the new text.
splitText										x
	Returns: Text node
	Splits the text in a node.
	Syntax: splitText( offset ) , where offset gives the location at which to split the text. This method truncates the original text to offset in length, and returns the second part of the text.
substringData										x
	Returns: String
	Gets a substring.
	Syntax: substringData( offset , length ) , where offset is the offset at which to get the text, and length is the length of the text to get. Returns the substring.

We've already worked with text nodes as long ago as Chapter 6. You can create text nodes with the document object's createTextNode method (covered in Table 9.5), although you get a Text object in the Netscape Navigator and a TextNode object in the Internet Explorer. In the example in Chapter 6 (Listing 06-09.html on the web site)which works in both browsersI'm creating a new <DIV> element using the document object's createElement method (which returns an element object that you also can treat as a node) and adding other objectstext and a text fieldto that element using insertBefore :

 <HTML>      <HEAD>          <TITLE>              Creating New Elements          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function addMore()              {                  var newDiv, newTextField, newText                  newDiv = document.createElement("DIV")                  newTextField = document.createElement("INPUT")                  newTextField.type = "TEXT"                  newTextField.value = "Hello!"  newText = document.createTextNode("Here is a new text field: ")  newDiv.insertBefore(newText, null)                  newDiv.insertBefore(newTextField, null)                  document.body.insertBefore(newDiv, null)              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Creating New Elements</H1>          <FORM>              <INPUT TYPE=BUTTON VALUE="Click Me!" ONCLICK="addMore()">          </FORM>      </BODY>  </HTML> 

This code gives you the result you see in Figure 6.6now we're creating new text nodes and inserting them into documents.

That completes our look at HTML text elements and text ranges for this chapter. We've seen quite a bit in this chapter, from elements such as <BLOCKQUOTE> and <MARQUEE> through TextRange and Range objects, all the way to TextNode and Text objects. In the next chapter, I'll start taking a look at the main reasons many JavaScript programmers use JavaScript in the first placewhen we start working with forms, buttons, check boxes, and radio buttons .