252Part IIIDocument Objects ReferenceExampleTo change a style property setting, access it via the element s styleobject. Use The Evaluator(Chapter 13) to compare the properties of the runtimeStyleand styleobjects of an element. For example, an unmodified copy of The Evaluator contains an emelement whose ID is myEM . Enter both document.getElementById( myEM ).style.color anddocument.getElementById( myEM ).runtimeStyle.color into the top text field in turn. Initially, both values are empty. Now assign a color to the styleproperty via the upper text box: document.getElementById( myEM ).style.color = red If you now type the two earlier statements into the upper box, you can see that the styleobject reflects the change, while the runtimeStyleobject still holds onto its original(empty) value. Related Items:currentStyleproperty; styleobject (Chapter 26). scopeNameValue:String.Read-Only Compatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The scopeNameproperty is associated primarily with XML that is embedded within a document. When you include XML, you can specify one or more XML Namespaces that define the owner of a custom tag name, thus aiming toward preventing conflicts of identical custom tags from dif- ferent sources in a document. (See Chapter 41 on the CD-ROM for more about XML objects.) The XML Namespace is assigned as an attribute of the tag that surrounds the entiredocument: After that, the Namespace value precedes all custom tags linked to that Namespace: To find out the Namespace owner of an element, you can read the scopeNameproperty ofthat element. For the preceding example, the scopeNamereturns fred. For regular HTML ele- ments, the returned value is always HTML. The scopeNameproperty is available only in Win32and UNIX flavors of IE5+. The comparable property in the W3C DOM is localName. ExampleIf you have a sample document that contains XML and a namespace spec, you can use document. write()or alert()methods to view the value of the scopeNameproperty. The syntax isdocument.getElementById( elementID ).scopeNameRelated Item:tagUrnproperty. scrollHeightscrollWidthValue:Integer.Read-Only Compatibility:WinIE4+, MacIE4+, NN7+, Moz1+, Safari1+ elementObject.runtimeStyle

251Chapter 15Generic HTML Element Objectsdocument.oscars.recordset.AbsolutePosition = row.recordNumber; }

Academy Awards 1978-1997 (Click on a table row to extract datafrom one record.)

The award for Best Actor of  went to  for his outstanding achievement in the film .

Related Items:dataFld, dataSrcproperties; table, trobjects (Chapter 37 on theCD-ROM). runtimeStyleValue:styleobject.Read-Only Compatibility:WinIE5+, MacIE5+, NN-, Moz-, Safari- You can determine the browser default settings for stylesheet attributes with the help of the runtimeStyleproperty. The styleobject that this property returns contains all styleattributes and the default settings at the time the page loads. This property does not reflectvalues assigned to elements by stylesheets in the document or by scripts. The default valuesreturned by this property differ from the values returned by the currentStyleproperty. The latter includes data about values that are not assigned explicitly by stylesheets, yet areinfluenced by the default behavior of the browser s rendering engine. In contrast, theruntimeStyleproperty shows unassigned style values as empty or zero. elementObject.runtimeStyle

250Part IIIDocument Objects Referencefrom the server yet. If you reload the page, chances are that the image will load instanta- neously from the cache and the readyStateproperty will report complete. Related Items:onreadystatechangeevent handler. recordNumberValue:Integer or null.Read-Only Compatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- Virtually every object has a recordNumberproperty, but it applies only to elements used inInternet Explorer data binding to represent repeated data. For example, if you display 30records from an external data store in a table, the trelement in the table is represented onlyonce in the HTML. However, the browser repeats the table row (and its component cells) toaccommodate all 30 rows of data. If you click a row, you can use the recordNumberpropertyof the trobject to see which record was clicked. A common application of this facility is indata binding situations that allow for updating records. For example, script a table so thatclicking on an uneditable row of data displays that record s data in editable text boxes else- where on the page. If an object is not bound to a data source, or it is a non-repeating objectbound to a data source, the recordNumberproperty is null. ExampleListing 15-15 shows how to use the recordNumberproperty to navigate to a specific record ina sequence of data. The data source is a small, tab-delimited file consisting of 20 records ofAcademy Award data. Thus, the table that displays a subset of the fields is bound to the datasource object. Also bound to the data source object are three spanobjects embedded withina paragraph near the top of the page. As the user clicks a row of data, three fields from thatclicked record are placed into the bound spanobjects. The script part of this page is a mere single statement. When the user triggers the onclickevent handler of the repeated trobject, the function receives as a parameter a reference to thetrobject. The data store object maintains an internal copy of the data in a recordsetobject. One of the properties of this recordsetobject is the AbsolutePositionproperty, which isthe integer value of the current record that the data object points to (it can point to only onerow at a time, and the default row is the first row). The statement sets the AbsolutePositionproperty of the recordsetobject to the recordNumberproperty for the row that the userclicks. Because the three spanelements are bound to the same data source, they are immedi- ately updated to reflect the change to the data object s internal pointer to the current record. Notice, too, that the third spanobject is bound to one of the data source fields not shown in thetable. You can reach any field of a record because the Data Source Object holds the entire datasource content. Listing 15-15: Using the Data Binding recordNumber Property … Putting this fragment into a document that is accessible across a slow network helps. If theimage is not in the browser s cache, you might get the uninitializedor loadingresult. The former means that the imgobject exists, but it has not started receiving the image dataelementObject.readyState

248Part IIIDocument Objects ReferenceNotice one workaround for the TextRangeobject s expand()method anomaly: If you specifya sentence, IE doesn t treat the beginning of a pelement as the starting end of a sentenceautomatically. A camouflaged (white text color) period is appended to the end of the previouselement to force the TextRangeobject to expand only to the beginning of the first sentenceof the targeted pelement. Listing 15-14: Using the parentTextEdit Property

Lorem ipsum dolor sit amet, consectetaur adipisicingelit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.

elementObject.parentTextEdit

247Chapter 15Generic HTML Element ObjectsparentNodeValue:Node object reference or null.Read-Only Compatibility:WinIE5+, MacIE5+, NN6+, Moz1+, Safari1+ The parentNodeproperty returns a reference to the next outermost node that is reflectedasan object belonging to the document. For a standard element object, the parentNodeproperty is the same as IE s parentElementbecause both objects happen to have a directparent child node relationship as well as a parent child element relationship. Other kinds of content, however, can be nodes. This includes text fragments within an element. A text fragment s parentNodeproperty is the next outermost node or element that encom- passes that fragment. A text node object in IE does not have a parentElementproperty. ExampleUse The Evaluator to examine the parentNodeproperty values of both an element and a non- element node. Begin with the following two statements and watch the results of each: document.getElementById( myP ).parentNode.tagNamedocument.getElementById( myP ).parentElement.tagName (IE only) Now examine the properties from the point of view of the first text fragment node of the myPparagraph element: document.getElementById( myP ).childNodes[0].nodeValuedocument.getElementById( myP ).childNodes[0].parentNode.tagNamedocument.getElementById( myP ).childNodes[0].parentElement (IE only) Notice (in IE) that the text node does not have a parentElementproperty. Related Items:childNodes, nodeName, nodeType, nodeValue, parentElementproperties. parentTextEditValue:Element object reference or null.Read-Only Compatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- Only a handful of objects in IE s object model are capable of creating text ranges (see theTextRangeobject in Chapter 35). To find an object s next outermost container capable ofgenerating a text range, use the parentTextEditproperty. If an element is in the hierarchy, that element s object reference is returned. Otherwise (for example, document.body.parentTextEdit), the value is null. MacIE always returns a value of nullbecause thebrowser doesn t support the TextRangeobject. ExampleListing 15-14 contains an example that demonstrates how to use the parentTextEditprop- erty to create a text range. The page resulting from Listing 15-14 contains a paragraph of Latintext and three radio buttons that select the size of a paragraph chunk: one character, oneword, or one sentence. If you click anywhere within the large paragraph, the onclickeventhandler invokes the selectChunk()function. The function first examines which of the radiobuttons is selected to determine how much of the paragraph to highlight (select) around thepoint at which the user clicks. After the script employs the parentTextEditproperty to test whether the clicked elementhas a valid parent capable of creating a text range, it calls upon the property again to helpcreate the text range. From there, TextRangeobject methods shrink the range to a singleinsertion point, move that point to the spot nearest the cursor location at click time, expandthe selection to encompass the desired chunk, and select that bit of text. elementObject.parentTextEdit

246Part IIIDocument Objects ReferenceExampleUse The Evaluator (Chapter 13) to explore the ownerDocumentproperty. Enter the followingstatement into the top text box: document.body.childNodes[5].ownerDocumentThe result is a reference to the documentobject. You can use that to inspect a property of thedocument, as shown in the following statement you should enter into the top text box: document.body.childNodes[5].ownerDocument.URLThis returns the document.URLproperty for the document that owns the child node. Related Item:documentobject. parentElementValue:Element object reference or null.Read-Only Compatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- The parentElementproperty returns a reference to the next outermost HTML element fromthe current element. This parent child relationship of elements is often, but not always, thesame as a parent child node relationship (see parentNodeproperty later in this chapter). The difference is that the parentElementproperty deals only with HTML elements asreflected as document objects, whereas a node is not necessarily an HTML element (forexample, an attribute or text chunk). There is also a distinction between parentElementand offsetParentproperties. The latter returns an element that may be many generations removed from a given element but is the immediate parent with regard to positioning context. For example, a tdelement sparentElementproperty is most likely its enclosing trelement, but a tdelement soffsetParentproperty is its tableelement. A script can walk the element hierarchy outward from an element with the help of theparentElementproperty. The top of the parent chain is the htmlelement. Its parentElementproperty returns null. ExampleYou can experiment with the parentElementproperty in The Evaluator. The document con- tains a pelement named myP. Type each of the following statements from the left column intothe upper expression evaluation text box and press Enter to see the results. ExpressionResultdocument.getElementById( myP ).tagNamepdocument.getElementById( myP ).parentElement[object] document.getElementById( myP ).parentElement.tagNamebodydocument.getElementById( myP ).parentElement.parentElement[object] document.getElementById( myP ).parentElement.parentElement.tagNamehtmldocument.getElementById( myP ).parentElement.nullparentElement.parentElementRelated Items:offsetParent, parentNodeproperties. elementObject.ownerDocument

245Chapter 15Generic HTML Element Objects

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:innerHTML, innerTextproperties; replaceNode()method. ownerDocumentValue:Document object reference.Read-Only Compatibility:WinIE6+, MacIE5+, NN6+, Moz1+, Safari1+ The ownerDocumentproperty belongs to any element or node in the W3C DOM. The prop- erty s value is a reference to the document node that ultimately contains the element ornode. If a script encounters a reference to an element or node (perhaps it has been passed asa parameter to a function), the object s ownerDocumentproperty provides a way to build ref- erences to other objects in the same document or to access properties and methods of thedocument objects. IE s proprietary version of this property is simply document. elementObject.ownerDocument

244Part IIIDocument Objects ReferenceouterHTMLouterTextValue:String.Read/Write Compatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- One way that Internet Explorer exposes an entire element to scripting is by way of theouterHTMLand outerTextproperties. The primary distinction between these two propertiesis that outerHTMLincludes the element s start and end tags whereas outerTextincludesonly rendered text that belongs to the element (including text from any nested elements). The outerHTMLproperty contains not only the text content for an element as seen on thepage, but also every bit of HTML tagging associated with that content. For example, considerthe following bit of HTML source code:

How are you? he asked.

The value of the pobject s outerHTMLproperty (document.all.paragraph1. outerHTML) is exactly the same as that of the source code. The browser interprets any HTML tags in a string that you assign to an element s outerHTMLproperty. This means that you can delete (set the property to an empty string) or replace anentire tag with this property. The document s object model adjusts itself to whatever adjust- ments you make to the HTML in this manner. In contrast, the outerTextproperty knows only about the text content of an element container. In the preceding example, the value of the paragraph s outerTextproperty (document.all. paragraph1.innerText) is: How are you? he asked. If this looks familiar, it s because in most cases the innerTextand outerTextproperties ofan existing element return the exact same strings. ExampleListing 15-13 demonstrates how to use the outerHTMLand outerTextproperties in IE toaccess and modify Web page content dynamically. The page generated by Listing 15-13(WinIE4+ only) contains an h1element label and a paragraph of text. The purpose is todemonstrate how the outerHTMLand outerTextproperties differ in their intent. Two textboxes contain the same combination of text and HTML tags that replaces the element thatcreates the paragraph s label. If you apply the default content of the first text box to the outerHTMLproperty of the label1object, the h1element is replaced by a spanelement whose classattribute acquires a differentstylesheet rule defined earlier in the document. Notice that the ID of the new spanelement is thesame as the original h1element. This allows the script attached to the second button to addressthe object. But this second script replaces the element with the raw text (including tags). Theelement is now gone, and any attempt to change the outerHTMLor outerTextproperties of thelabel1object causes an error because there is no longer a label1object in the document. Use this laboratory to experiment with some other content in both text boxes. Listing 15-13: Using outerHTML and outerText Properties elementObject.outerHTML

243Chapter 15Generic HTML Element Objectssets of properties. WinIE4 and MacIE5 rely on client properties, while WinIE5+ works with the off- set properties. The discrepancies even out, however, with the whileloop. This loop traversesthe offsetParenthierarchy starting with the offsetParentof the cell out to, but not includ- ing, the document.bodyobject. The bodyobject is not included because that is the positioningcontext for the image. In IE5, the whileloop executes only once because just the tableelementexists between the cell and the body; in IE4, the loop executes twice to account for the trandtableelements up the hierarchy. Finally, the cumulative values of left and top measures areapplied to the positioning properties of the divobject s style and the image is made visible. Listing 15-12: Using the offsetParent Property

The offsetParent Property

After the document loads, the script positions a small image in theupper left corner of the second table cell.

Related Items:offsetLeft, offsetTop, offsetHeight, offsetWidthproperties. elementObject.offsetParent