238Part IIIDocument Objects Reference} } } A more efficient approach uses the getElementsByTagName()method to retrieve a collec- tion of all pelements and then iterate through them directly. Related Item:tagNameproperty. nodeTypeValue:Integer.Read-Only Compatibility:WinIE5+, MacIE5+, NN6+, Moz1+, Safari1+ The W3C DOM specification identifies a series of constant values that denote categories ofnodes. Every node has a value that identifies its type, but not all browsers support thenodeTypeproperty on all node types as objects. Table 15-4 lists the nodeTypevalues imple- mented in recent browsers; all of the values are considered part of the W3C DOM Level 2specification. Table 15-4: nodeType Property ValuesValueDescriptionWinIEMacIENN/MozSafari1Element node55NN612Attribute node65NN613Text (#text) node55NN614CDATA section node—- 5Entity reference node—- 6Entity node—- 7Processing instruction node—- 8Comment node65NN6- 9Document node55NN6110Document type node–NN6111Document fragment node65NN6112Notation node—- The nodeTypevalue is automatically assigned to a node, whether the node exists in the docu- ment s HTML source code or it is generated on the fly via a script. For example, if you createa new element node through any of the ways available by script (for example, by assigning astring encased in HTML tags to the innerHTMLproperty or by explicitly invoking the document. createElement()method), the new element assumes a nodeTypeof 1. Mozilla-based browsers and Safari go one step further in supporting the W3C DOM specificationby implementing a set of Nodeobject property constants for each of the nodeTypevalues. Table 15-5 lists the entire set as defined in the DOM Level 2 specification. Substituting theseconstants for nodeTypeintegers can improve readability of a script. For example, instead ofif (myElem.nodeType == 1) {…} it is much easier to see what s going on withif (myElem.nodeType == Node.ELEMENT_NODE) {…} elementObject.nodeName

237Chapter 15Generic HTML Element ObjectsnextSiblingpreviousSiblingValue:Object reference.Read-Only Compatibility:WinIE5+, MacIE5+, NN6+, Moz1+, Safari1+ A sibling nodeis one that is at the same nested level as another node in the hierarchy of anHTML document. For example, the following pelement has two child nodes (the emand spanelements). Those two child nodes are siblings of each other.

MegaCorp is the source of the hottest gizmos.

Sibling order is determined solely by the source code order of the nodes. Therefore, in theprevious example, the emnode has no previousSiblingproperty. Meanwhile, the spannodehas no nextSiblingproperty (meaning that these properties return null). These propertiesprovide another way to iterate through all nodes at the same level. ExampleThe following function assigns the same class name to all child nodes of an element: function setAllChildClasses(parentElem, className) { var childElem = parentElem.firstChild; while (childElem.nextSibling) { childElem.className = className; childElem = childElem.nextSibling; } } This example is certainly not the only way to achieve the same results. Using a forloop toiterate through the childNodescollection of the parent element is an equally valid approach. Related Items:firstChild, lastChild, childNodesproperties; hasChildNodes(), insertAdjacentElement()methods. nodeNameValue:String.Read-Only Compatibility:WinIE5+, MacIE5+, NN6+, Moz1+, Safari1+ For HTML and XML elements, the name of a node is the same as the tag name. The nodeNameproperty is provided for the sake of consistency with the node architecture specified by theformal W3C DOM standard. The value, just like the tagNameproperty, is an all-uppercasestring of the tag name (even if the HTML source code is written with lowercase tags). Some nodes, such as the text content of an element, do not have a tag. The nodeNameprop- erty for such a node is a special value: #text. Another kind of node is an attribute of an ele- ment. For an attribute, the nodeNameis the name of the attribute. See Chapter 14 for moreabout Nodeobject properties. ExampleThe following function demonstrates one (not very efficient) way to assign a new class nameto every pelement in an IE5+ document: function setAllPClasses(className) { for (var i = 0; i < document.all.length; i++) { if (document.all[i].nodeName == P ) { document.all[i].className = className; elementObject.nodeName

236Part IIIDocument Objects ReferenceFor decrementing through an array (in other words, starting from the last item in the arrayand working toward the first), the initial expression must initialize the counting variable asthe length minus one: for (var i = someArray.length - 1; i >= 0; i–) {…} For most arrays and collections, the lengthproperty is read-only and governed solely by thenumber of items in the group. But in more recent versions of the browsers, you can assignvalues to some object arrays (areas, options, and the selectobject) to create placeholdersfor data assignments. See discussions of the area, select, and optionelement objects fordetails. A plain JavaScript array can also have its lengthproperty value modified by script toeither trim items from the end of the array or reserve space for additional assignments. SeeChapter 30 for more about the Arrayobject. ExampleYou can try the following sequence of statements in the top text box of The Evaluator to seehow the lengthproperty returns values (and sets them for some objects). Note that somestatements work in only some browser versions. (All browsers) document.forms.length(All browsers) document.forms[0].elements.length(NN3+, IE4+) document.images.length(NN4+) document.layers.length(IE4+) document.all.length(IE5+, W3C) document.getElementById( myTable ).childNodes.lengthRelated Items:area, select, option, and Arrayobjects. localNamenamespaceURIprefixValue:String.Read-Only Compatibility:WinIE-, MacIE-, NN6+, Moz1+, Safari1+ The three properties, localName, namespaceURI, and prefix, apply to any node in an XMLdocument that associates a namespace URI with an XML tag. Although NN6 exposes all threeproperties for all element (and node) objects, the properties do not return the desired values. However, Mozilla-based browsers remedy the situation. To better understand what valuesthese three properties represent, consider the following XML content: To Kill a Mockingbird The element whose tag is is associated with the Namespace URI defined for theblock, and the element s namespaceURIproperty would return the string http:// bigbooks. org/schema. The tag name consists of a prefix (before the colon) and the local name (afterthe colon). In the above example, the prefixproperty for the element defined by thetag would be bk, while the localNameproperty would return title. ThelocalNameproperty of any node returns the same value as its nodeNameproperty value, such as #textfor a text node. For more information about XML Namespaces, visit http://www.w3.org/TR/REC-xml-names. Related Items:scopeName, tagUrnproperties. elementObjectCollection.length

235Chapter 15Generic HTML Element ObjectslangValue:ISO language code string.Read/Write Compatibility:WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ The langproperty governs the written language system used to render an element s text con- tent when overriding the default browser s language system. The default value for this prop- erty is an empty string unless the corresponding langattribute is assigned a value in theelement s tag. Modifying the property value by script control does not appear to have anyeffect in the current browser implementations. ExampleValues for the langproperty consist of strings containing valid ISO language codes. Suchcodes have, at the minimum, a primary language code (for example, fr for French) plus anoptional region specifier (for example, fr-ch for Swiss French). The code to assign a SwissGerman value to an element looks like the following: document.getElementById( specialSpan ).lang = de-ch ; languageValue:String.Read/Write Compatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- IE4+ s architecture allows for multiple scripting engines to work with the browser. Twoengines are included with the basic Windows version browser: JScript (compatible withJavaScript) and Visual Basic Scripting Edition (VBScript). The default scripting engine isJScript. But if you wish to use VBScript or some other scripting language in statements thatare embedded within event handler attributes of a tag, you can specifically direct the browserto apply the desired scripting engine to those script statements by way of the languageattribute of the tag. The languageproperty provides scripted access to that property. Unlessyou intend to modify the event handler HTML code and replace it with a statement inVBScript (or any other non-JScript-compatible language installed with your browser), you donot need to modify this property (or read it, for that matter). Valid values include JScript, javascript, vbscript, and vbs. Third-party scripting engineshave their own identifier for use with this value. Because the languageattribute was alsoused in the

ARTICLE I

Congress shall make no law respecting an establishment of religion, orprohibiting the free exercise thereof; or abridging the freedom ofspeech, or of the press; or the right of the people peaceably toassemble, and to petition the government for a redress of grievances.

Related Items:outerHTML, outerTextproperties; replaceNode()method. isContentEditableValue:Boolean.Read-Only Compatibility:WinIE5.5+, MacIE-, NN-, Moz-, Safari- The isContentEditableproperty returns a Boolean value indicating whether a particularelement object is set to be editable (see the preceding discussion of the contentEditableproperty). This property is helpful because if a parent element s contentEditablepropertyelementObject.innerHTML

231Chapter 15Generic HTML Element Objectstags in the content, the text is rendered as is.) For example, consider the following bit ofHTML source code:

How are you? he asked.

The value of the paragraph object s innerHTMLproperty(document.getElementById( paragraph1 ).innerHTML) is: How are you? he asked. The browser interprets any HTML tags that you include in a string you assign to an element sinnerHTMLproperty as tags. This also means that you can introduce entirely new nested ele- ments (or child nodes in the modern terminology) by assigning a slew of HTML content to anelement s innerHTMLproperty. The document s object model adjusts itself to the newlyinserted content. In contrast, the innerTextproperty knows only about the text content of an element con- tainer. In the example you just saw, the value of the paragraph s innerTextproperty (docu- ment.getElementById( paragraph1 ).innerText) is: How are you? he asked. It s important to remember that if you assign a string to the innerTextproperty of an ele- ment and that string contains HTML tags, the tags and their angle brackets appear in the ren- dered page and are not interpreted as live tags. Do not modify the innerHTMLproperty to adjust the HTML for frameset, html, head, or titleobjects. You may modify table constructions through either innerHTMLor the various table- related methods that create or delete rows, columns, and cells (see Chapter 37 on the CD-ROM). It is also safe to modify the contents of a cell by setting its innerHTMLor innerTextproperties. When the HTML you insert includes a