118 Part III ✦ Document Objects Reference IE5.5 introduces the concept of editable HTML content on a page. Element tags can include a CONTENTEDITABLE attribute, whose value is echoed via the contentEditable property of the element. The default value for this property is inherit, which means that the property inherits whatever setting this property has in the hierarchy of HTML containers outward to the body. If you set the contentEditable property to true, then that element and all nested elements set to inherit the value become editable; conversely, a setting of false turns off the option to edit the content. Example (with Listing 15-7) on the CD-ROM Related Item: isContentEditable property. currentStyle Value: style object Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Every element has style attributes applied to it, even if those attributes are the browser’s default settings. Because an element’s style object reflects only those properties whose corresponding attributes are explicitly set via CSS statements, you cannot use the style property of an element object to view default style set- tings applied to an element. That’s where the currentStyle property comes in. This property returns a read-only style object that contains values for every possible style property applicable to the element. If a style property is explicitly set via CSS statement or script adjustment, the current reading for that property is also available here. Thus, a script can inquire about any property to determine if it should change to meet some scripted design goal. For example, if you surround some text with an <EM> tag, the browser by default turns that text into an italic font style. This setting is not reflected in the element’s style object (fontStyle prop- erty) because the italic setting was not set via CSS; in contrast, the element object’s currentStyle.fontStyle property reveals the true, current fontStyle property of the element as italic. To change a style property setting, access it via the element’s style object. Example on the CD-ROM Related Items: runtimeStyle, style objects (Chapter 30). On the CD-ROM On the CD-ROM elementObject.currentStyle 119 Chapter 15 ✦ Generic HTML Element Objects dataFld dataFormatAs dataSrc Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ The dataFld, dataFormatAs, and dataSrc properties (along with more element- specific properties such as dataPageSize and recordNumber) are part of the Internet Explorer data-binding facilities based on ActiveX controls. The Win32 ver- sions of IE4 and later have several ActiveX objects built into the browsers that facili- tate the direct communication between a Web page and a data source. Data sources include text files, XML data, HTML data, and external databases. Data binding is a very large topic, much of which extends more to discussions about Microsoft Data Source Objects (DSOs), ODBC, and JDBC — subjects well beyond the scope of this book. But data binding is a powerful tool and can be of use even if you are not a database guru. Therefore, this discussion of the three primary properties — dataFld, dataFormatAs, and dataSrc — briefly covers data binding through Microsoft’s Tabular Data Control DSO. This allows any page to access, sort, display, and filter (but not update) data downloaded into a Web page from an external text file (commonly comma- or tab-delimited data). You can load data from an external text file into a document with the help of the Tabular Data Control (TDC). You retrieve the data by specifying the TDC object within an <OBJECT> tag set and specifying additional parameters such as the URL of the text file and field delimiter characters. The OBJECT element can go anywhere within the BODY of your document. (I tend to put it at the bottom of the code so that all normal page rendering happens before the control loads.) Retrieving the data simply brings it into the browser and does not, on its own, render the data on the page. If you haven’t worked with embedded objects in IE, the CLASSID attribute value might seem a bit strange. The most perplexing part to some is the long value of numeric data signifying the Globally Unique Identifier (GUID) for the object. You must enter this value exactly as shown in the following example for the proper ActiveX TDC to run. The HTML syntax for this object is as follows: <OBJECT ID=”objName” CLASSID=”clsid:333C7BC4-460F-11D0-BC04-0080C7055A83”> <PARAM NAME=”DataURL” VALUE=”URL”> [additional optional parameters] </OBJECT> Table 15-3 lists the parameters available for the TDC. Only the DataURL param- eter is required; others — such as FieldDelim, UseHeader, RowDelim, and EscapeChar — may be helpful depending on the nature of the data source. elementObject.dataFld 120 Part III ✦ Document Objects Reference Table 15-3 Tabular Data Control Parameters Parameter Description CharSet Character set of the data source file. Default is latin1. DataURL URL of data source file (relative or absolute). EscapeChar Character used to “escape” delimiter characters that are part of the data. Default is empty. A common value is “\”. FieldDelim Delimiter character between fields within a record. Default is comma (,). For a Tab character, use a value of 	. Language ISO language code of source data. Default is en-us. TextQualifier Optional character surrounding a field’s data. Default is empty. RowDelim Delimiter character between records. Default is newline (NL). UseHeader Set to true if the first row of data in the file contains field names. Default is false. The value you assign to the OBJECT element’s ID attribute is the identifier that your scripts use to communicate with the data after the page and data completely load. You can therefore have as many uniquely named TDCs loaded in your page as there are data source files you want to access at once. The initial binding of the data to HTML elements usually comes when you assign values to the DATASRC and DATAFLD attributes of the elements. The DATASRC attribute points to the DSO identifier (matching the ID attribute of the OBJECT ele- ment, preceded with a hash symbol), while the DATAFLD attribute 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 are displayed in consecu- tive rows of the table (more about this in a moment). Adjust the dataSrc and dataFld properties if you want the same HTML element (other than a table) to change the data that it displays. These properties apply to a subset of HTML elements that can be associated with external data: A, APPLET, BODY, BUTTON, DIV, FRAME, IFRAME, IMG, INPUT (most types), LABEL, MARQUEE, OBJECT, PARAM, SELECT, SPAN, and TEXTAREA objects. In some cases, your data source may store chunks of HTML-formatted text for rendering inside an element. Unless directed otherwise, the browser renders a data source field as plain text — even if the content contains HTML formatting tags. But if you want the HTML to be observed during rendering, you can set the dataFormatAs property (or, more likely, the DATAFORMATAS attribute of the tag) to HTML. The default value is text. Example (with Listings 15-8 and 15-9) on the CD-ROM On the CD-ROM elementObject.dataFld 121 Chapter 15 ✦ Generic HTML Element Objects Related Items: recordNumber, TABLE.dataPageSize properties. dir Value: “ltr” | “rtl” Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ The dir property (based on the DIR attribute of virtually every text-oriented HTML element) controls whether an element’s text is rendered left-to-right (the default) or right-to-left. Depending on the default language and character set of the IE5 browser running a page, selecting a value other than the default may require the user to install Microsoft’s Uniscribe add-in component. By and large, this property (and HTML attribute) is necessary only when you need to override the default directionality of a language’s character set as defined by the Unicode standard. Example on the CD-ROM Related Item: lang property. disabled Value: Boolean Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility (✓) ✓✓ ✓ While some elements have a disabled property in IE4, IE5, and NN6, this prop- erty is associated with every HTML element in IE5.5. Disabling an HTML element (like form elements) usually gives the element a “dimmed” look, indicating that it is not active. A disabled element does not receive any events. It also cannot receive focus, either manually or by script (although disabled text fields in IE4/Mac errantly manage to receive focus). But a user can still select and copy a disabled body text element. If you disable a form control element, the element’s data is not submitted to the server with the rest of the form elements. If you need to keep a form control “locked down,” but still submit it to the server, use the FORM element’s onSubmit event handler to enable the form control right before the form is submitted. Note On the CD-ROM elementObject.disabled 122 Part III ✦ Document Objects Reference Example on the CD-ROM Related Item: isDisabled property. document Value: document object Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ In the context of HTML element objects as exposed in IE4+, the document prop- erty is a reference to the document that contains the object. While it is unlikely that you will need to use this property, document may come in handy for complex scripts and script libraries that handle objects in a generic fashion and do not know the reference path to the document containing a particular object. You might need a ref- erence to the document to inspect it for related objects. The W3C version of this property (implemented in IE5/Mac but not in IE5.5/Windows) is ownerDocument. Example on the CD-ROM Related Item: ownerDocument property. filters Value: Array Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Filters are IE-specific style sheet add-ons that offer a greater variety of font ren- dering (such as drop shadows) and transitions between hidden and visible ele- ments. Each filter specification is a filter object. The filters property contains an array of filter objects defined for the current element. You can apply filters to the following set of elements: BODY, BUTTON, IMG, INPUT, LI, MARQUEE, OL, TABLE, TD, TEXTAREA, TH, UL, and positioned DIV and SPAN elements. See Chapter 30 for details about style sheet filters. Related Item: filter object. On the CD-ROM On the CD-ROM elementObject.filters 123 Chapter 15 ✦ Generic HTML Element Objects firstChild lastChild Value: Node object reference Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ W3C DOM-based document object models are built around an architecture known as a node map. Each object defined by HTML is a node in the map. A node has relationships with other nodes in the document — relationships described in family terms of parents, siblings, and children. A child node is an element that is contained by another element. The container is the parent of such a child. Just as an HTML element can contain any number of child elements, so can a parent object have zero or more children. A list of those children (returned as an array) can be read from an object by way of its childNodes property: var nodeArray = document.getElementById(“elementID”).childNodes While you can use this array (and its length property) to get a reference to the first or last child node, the firstChild and lastChild properties offer shortcuts to those positions. These are helpful when you wish to insert a new child before or after all of the others and you need a reference point for the IE insertAdjacentElement() method or other method that adds elements to the document’s node list. See the discussion of the childNodes property earlier in this chapter about the presence of “phantom” nodes in some browser versions. The problem may influ- ence your use of the firstChild and lastChild properties. Example (with Listing 15-10) on the CD-ROM Related Items: nextSibling, parentElement, parentNode, previousSibling properties; appendChild(), hasChildNodes(), removeChild(), removeNode(), replaceChild(), replaceNode() methods. On the CD-ROM Caution elementObject.firstChild 124 Part III ✦ Document Objects Reference height width Value: Integer or Percentage String Read/Write and Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓✓✓ The height and width properties described here are not the identically named properties that belong to an element’s style. Rather, these properties reflect the values normally assigned to HEIGHT and WIDTH attributes of elements such as IMG, APPLET, and TABLE, and so on. As such, these properties are accessed directly from the object (for example, document.all.myTable.width in IE4+) rather than through the style object (for example, document.all.myDIV.style.width). Only elements for which the HTML 4.x standard provides HEIGHT and WIDTH attributes have the corresponding properties. Values for these properties are either integer pixel values (numbers or strings) or percentage values (strings only). If you need to perform some math on an exist- ing percentage value, use the parseInt() function to extract the numeric value for use with math calculations. If an element’s HEIGHT and WIDTH attributes are set as percentage values, you can use the clientHeight and clientWidth properties in IE4+ to get the rendered pixel dimensions. Property values are read/write for the image object in most recent browser ver- sions because you can resize an image object in IE4+ and NN6 after the page loads. Properties are read/write for some other objects (such as the TABLE object) — but not necessarily all others that support these properties. Support for these properties in NN4 is limited to the IMAGE object. In that browser, both properties are read-only. In general, you cannot set the value of these properties to something less than is required to render the element. This is particularly true of a table. If you attempt to set the height value to less than the amount of pixels required to display the table as defined by its style settings, your changes have no effect (even though the prop- erty value retains its artificially low value). For other objects, however, you can set the size to anything you like and the browser scales the content accordingly (images, for example). If you want to see only a segment of an element (in other words, to crop the element), use a style sheet to set the element’s clipping region. Example on the CD-ROM Related Items: clientHeight, clientWidth properties; style.height, style.width properties. On the CD-ROM elementObject.height 125 Chapter 15 ✦ Generic HTML Element Objects hideFocus Value: Boolean Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ In IE for Windows, button types of form controls and links display a dotted rect- angle around some part of the element whenever that element has focus. If you set the TABINDEX attribute or tabIndex property of any other kinds of elements in IE5+, they, too, display that dotted line when given focus. You can still let an ele- ment receive focus, but hide that dotted line, by setting the hideFocus property of the element object to true (default value is false). Hiding focus does not disable the element. In fact, if the element about to receive focus is scrolled out of view, the page scrolls to bring the element into view. Form controls that respond to keyboard action (for example, pressing the spacebar to check or uncheck a checkbox control) also continue to work as normal. For some designers, the focus rectangle harms the design goals of the page. The hideFocus property gives them more control over the appearance while maintaining consis- tency of operation with other pages. There is no corresponding HTML attribute for a tag, so you can use an onLoad event handler in the page to set the hideFocus property of desired objects after the page loads. Example on the CD-ROM Related Items: tabIndex property; srcollIntoView() method. id Value: String (See text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ The id property returns the identifier assigned to an element’s ID attribute in the HTML code. A script cannot modify the ID of an existing element nor assign an ID to an element that lacks one. But if a script creates a new element object, an identifier may be assigned to it by way of the id property. On the CD-ROM elementObject.id 126 Part III ✦ Document Objects Reference Example on the CD-ROM Related Item: className property. innerHTML innerText Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility (✓) ✓✓ ✓ One way that Internet Explorer exposes the contents of an element is through the innerHTML and innerText properties. (Navigator 6 offers only the innerHTML property.) All content defined by these “inner” properties consists of document data that is contained by an element’s start and end tags, but not including the tags themselves (see outerText and outerHTML properties). Setting these inner proper- ties is a common way to modify a portion of a page’s content after the page loads. The innerHTML property contains not only the text content for an element as seen on the page, but also every bit of HTML tagging that is associated with that content. (If there are no tags in the content, the text is rendered as is.) For example, consider the following bit of HTML source code: <P ID=”paragraph1”>”How <EM>are</EM> you?” he asked.</P> The value of the paragraph object’s innerHTML property (document.all. paragraph1.innerHTML ) is: “How <EM>are</EM> you?” he asked. The browser interprets any HTML tags that you include in a string you assign to an element’s innerHTML property as tags. This also means that you can introduce entirely new nested elements (or child nodes in the modern terminology) by assign- ing a slew of HTML content to an element’s innerHTML property. The document’s object model adjusts itself to the newly inserted content. In contrast, the innerText property knows only about the text content of an element container. In the example you just saw, the value of the paragraph’s innerText property (document.all.paragraph1.innerText) is: “How are you?” he asked. It’s important to remember that if you assign a string to the innerText property of an element and that string contains HTML tags, the tags and their angle brackets appear in the rendered page and are not interpreted as live tags. Do not modify the innerHTML property to adjust the HTML for FRAMESET, HTML, HEAD, TITLE, or table-related objects. You should modify table constructions through the various table-related methods that create or delete rows, columns, and On the CD-ROM elementObject.innerHTML 127 Chapter 15 ✦ Generic HTML Element Objects cells (see Chapter 27). It is safe, however, to modify the contents of a cell by setting its innerHTML or innerText properties. When the HTML you insert includes a <SCRIPT> tag, be sure to include the DEFER attribute to the opening tag. This even goes for scripts that contain function definitions, which you might consider to be deferred automatically. If your audience includes Internet Explorer 4 for the Macintosh, know that sev- eral elements do not support these properties. Be sure to test your page thoroughly on this platform combination. Also, if you want to have the convenience of the innerText property in Navigator 6, see Chapter 14 for instructions on how to add that property to all elements. Alternatively, you can use the NN6-compatible innerHTML property to assign new text content to an element, even though the content contains no HTML tags. Example (with Listing 15-11) on the CD-ROM Related Items: outerHTML, outerText properties; replaceNode() method. isContentEditable Value: Boolean Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ The isContentEditable property returns a Boolean value indicating whether a particular element object is set to be editable (see the preceding discussion of the contentEditable property). This property is helpful because if a parent element’s contentEditable property is set to true, a nested element’s contentEditable property likely is set to its default value inherit. But because its parent is editable, the isContentEditable property of the nested element returns true. Example on the CD-ROM Related Item: contentEditable property. isDisabled Value: Boolean Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ On the CD-ROM On the CD-ROM elementObject.isDisabled . submitted. Note On the CD-ROM elementObject.disabled 122 Part III ✦ Document Objects Reference Example on the CD-ROM Related Item: isDisabled property. document Value: document object Read-Only NN2 NN3 NN4 NN6. objects as exposed in IE4+, the document prop- erty is a reference to the document that contains the object. While it is unlikely that you will need to use this property, document may come in handy. generic fashion and do not know the reference path to the document containing a particular object. You might need a ref- erence to the document to inspect it for related objects. The W3C version