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 &#09;.
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