228Part IIIDocument Objects ReferenceListing 15-10(continued) document.getElementById( myList ).replaceChild(newItem, firstLI); } function replaceLast(form) { var newItem = makeNewLI(form.input.value); var lastLI = document.getElementById( myList ).lastChild; document.getElementById( myList ).replaceChild(newItem, lastLI); }

firstChild and lastChild Property Lab

1. Initial Item 1
2. Initial Item 2
3. Initial Item 3
4. Initial Item 4

Related Items:nextSibling, parentElement, parentNode, previousSiblingproperties; appendChild(), hasChildNodes(), removeChild(), removeNode(), replaceChild(), replaceNode()methods. heightwidthValue:Integer or percentage string.Read/Write and Read-Only Compatibility:WinIE4+, MacIE4+, NN4+, Moz1+, Safari1+ The heightand widthproperties described here are not the identically named properties thatbelong to an element s style. Rather, these properties reflect the values normally assigned toheightand widthattributes of elements such as img, applet, table, and so on. As such, theseproperties are accessed directly from the object (for example, document.getElementById( myTable ).widthin IE4+) rather than through the styleobject (for example, document. getElementById( myDIV ).style.width). Only elements for which the HTML 4.xstandardprovides heightand widthattributes have the corresponding properties. elementObject.firstChild

227Chapter 15Generic HTML Element ObjectsA child nodeis an element that is contained by another element. The container is the parentof such a child. Just as an HTML element can contain any number of child elements, so can aparent object have zero or more children. A list of those children (returned as an array) canbe read from an object by way of its childNodesproperty: var nodeArray = document.getElementById( elementID ).childNodes; While you can use this array (and its lengthproperty) to get a reference to the first or lastchild node, the firstChildand lastChildproperties offer shortcuts to those positions. These are helpful when you wish to insert a new child before or after all of the others and youneed a reference point for the IE insertAdjacentElement()method or other method thatadds elements to the document s node list. ExampleListing 15-10 contains an example of how to use the firstChildand lastChildpropertiesto access child nodes. These two properties come in handy in this example, which adds andreplaces lielements to an existing olelement. You can enter any text you want to appear atthe beginning or end of the list. Using the firstChildand lastChildproperties simplifiesaccess to the ends of the list. For the functions that replace child nodes, the example uses thereplaceChild()method. Alternatively for IE4+, you can modify the innerTextproperty ofthe objects returned by the firstChildor lastChildproperty. This example is especiallyinteresting to watch when you add items to the list: The browser automatically renumbersitems to fit the current state of the list. See the discussion of the childNodesproperty earlier in this chapter about the presence of phantom nodes in some browser versions. The problem may influence your use of thefirstChildand lastChildproperties. Listing 15-10: Using firstChild and lastChild Properties

Academy Awards 1978-1997

elementObject.dataFld

223Chapter 15Generic HTML Element ObjectsAnother button on the page enables you to switch between the initial piecemeal version of thedocument and the unformatted version in its entirety. To load the entire document as a singlerecord, the FieldDelimand RowDelimparameters of the second objectelement eliminate theirdefault values by replacing them with characters that don t appear in the document at all. Andbecause the external file does not have a field name in the file, the default value (column1for thelone column in this document) is the data field. Thus, in the toggleComplete()function, thedataSrcproperty is changed to the desired objectelement ID, the dataFldproperty is set tothe correct value for the data source, and the dataFormatAsproperty is changed to reflect thedifferent intention of the source content (to be rendered as HTML or as plain text). When the dis- play shows the entire document, you can hide the two radio buttons by assigning a classNamevalue to the spanelement that surrounds the buttons. The classNamevalue is the identifier ofthe class selector in the document s stylesheet. When the toggleComplete()function resetsthe classNameproperty to empty, the default properties (normal inline display style) take hold. One further example demonstrates the kind of power available to the TDC under script con- trol. Listing 15-9 displays table data from a tab-delimited file of Academy Award information. The data file has eight columns of data, and each column heading is treated as a field name: Year, Best Picture, Best Director, Best Director Film, Best Actress, Best Actress Film, BestActor, and Best Actor Film. For the design of the page, only five fields from each recordappear: Year, Film, Director, Actress, and Actor. Notice in the listing how the HTML for thetable and its content is bound to the data source object and the fields within the data. The dynamic part of this example is apparent in how you can sort and filter the data, onceloaded into the browser, without further access to the original source data. The TDC objectfeatures Sortand Filterproperties that enable you to act on the data currently loaded inthe browser. The simplest kind of sorting indicates on which field (or fields via a semicolon- delimited list of field names) the entire data set should be sorted. Leading the name of thesort field is either a plus (to indicate ascending) or minus (descending) symbol. After settingthe dataobject s Sortproperty, invoke its Reset()method to tell the object to apply thenew property. The data in the bound table is immediately redrawn to reflect any changes. Similarly, you can tell a data collection to display records that meet specific criteria. In Listing15-9, two select lists and a pair of radio buttons provide the interface to the Filterprop- erty s settings. For example, you can filter the output to display only those records in whichthe Best Picture was the same picture of the winning Best Actress s performance. Simple filterexpressions are based on field names: dataObj.Filter = Best Picture = Best Actress Film ; Listing 15-9: Sorting Bound Data

U.S. Bill of Rights

elementObject.dataFld

221Chapter 15Generic HTML Element ObjectsThe value you assign to the objectelement s idattribute is the identifier that your scriptsuse to communicate with the data after the page and data completely load. You can thereforehave as many uniquely named TDCs loaded in your page as there are data source files youwant to access at once. The initial binding of the data to HTML elements usually comes when you assign values to thedatasrcand datafldattributes of the elements. The datasrcattribute points to the dsoidentifier (matching the idattribute of the objectelement, preceded with a hash symbol), while the datafldattribute points to the name of the field whose data should be extracted. When you use data binding with an interactive element such as a table, multiple records aredisplayed in consecutive rows of the table (more about this in a moment). Adjust the dataSrcand dataFldproperties if you want the same HTML element (other than atable) to change the data that it displays. These properties apply to a subset of HTML elementsthat can be associated with external data: a, applet, body, button, div, frame, iframe, img, input(most types), label, marquee, object, param, select, span, and textareaobjects. In some cases, your data source may store chunks of HTML-formatted text for renderinginside an element. Unless directed otherwise, the browser renders a data source field as plaintext even if the content contains HTML formatting tags. But if you want the HTML to beobserved during rendering, you can set the dataFormatAsproperty (or, more likely, thedataformatasattribute of the tag) to HTML. The default value is text. ExampleListing 15-8 is a simple document that has two TDC objects associated with it. The external filesare different formats of the U.S. Bill of Rights document. One file is a traditional, tab-delimiteddata file consisting of only two records. The first record is a tab-delimited sequence of fieldnames (named Article1 , Article2 , and so on); the second record is a tab-delimitedsequence of article content defined in HTML:

ARTICLE I

Congress shall make…

The second file is a raw text file consisting of the full Bill of Rights with no HTML formattingattached. When you load Listing 15-8, only the first article of the Bill of Rights appears in a blue-borderedbox. Buttons enable you to navigate to the previous and next articles in the series. Because thedata source is a traditional, tab-delimited file, the nextField()and prevField()functions cal- culate the name of the next source field and assign the new value to the dataFldproperty. Allof the data is already in the browser after the page loads, so cycling through the records is asfast as the browser can reflow the page to accommodate the new content. Listing 15-8: Binding Data to a Page