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 . |