Dynamic HTML standard properties

Standard DHTML Properties

Standard Properties
Internet Explorer 4.0's scripting object model is all-encompassing, to the point that unknown attributes for known elements are available through scripting. I.e. for any element that Internet Explorer 4.0 supports, any attributes of your choice can be added to the element and their values are available through scripting. Inquisitive readers will have noticed that the title documents in the HTMLib use XSIZE and YSIZE attributes in their links. These are available to the rest of the HTMLib for scripting, enabling the popups to work. Detailed below are the standard Dynamic HTML properties supported for practically every element in Internet Explorer 4.0

className
The className property can be used to determine, or set, which particular style sheet class the referenced element uses, from the documents style sheet settings, i.e. whatever the CLASS attribute is set to. For example, the following <A> element utilises the style sheet class "warning"

<A HREF="warning.htm" CLASS="warning">Read the warning first</A>

thus, its className property would be warning.

Dynamically setting an elements class to one that doesn't exist causes the element to use the browsers default settings for the element, or the default style sheet setting for the element in any style sheet declarations attached to the document.

dataFld
The dataFld property directly reflects the value of the elements DATAFLD property, for those elements that support Data Binding. The DATAFLD attribute is used to set the column name that the element will take data from - the column name being a valid column in the Data source object referenced by the DATASRC attribute/property (see below). For more information, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects the DATAFORMATAS attribute for those elements that supported HTML formatted Data Binding. The DATAFORMATAS attribute can have values of "Text" or "HTML" and specifies whether the data provided by the Data Source object should be treated literally ("Text"), or parsed ("HTML"). Note that if the data contains HTML formatting, but the DATAFORMATAS="HTML" attribute is not set, it will be treated as plain text.

dataSrc
The dataSrc property directly reflects the DATASRC attribute for elements that support Data Binding. The DATASRC attribute referenced the Data Source that has been bound to elements in the document using the <OBJECT> element. For more information, see the Data Binding topic.

document
The document property contains a reference to the Document Object in which the element is contained. Through it, various properties of the Document Object can be obtained.

filters
The filters collection property represents a Filters collection applied to the referenced element. For example:

<IMG ID="logo" SRC="images/logo2.gif" WIDTH="384" HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0, Transition=12);VISIBILITY:hidden" ALT="HTMLib logo" ALIGN="center"> . . . call logo.filters.item(0).Apply() logo.style.visibility="" call logo.filters.item(0).Play()

The image has a Transition filter applied to it and is later referenced in a script by calling the first item of the elements filters collection.

id
The id property reflects the referenced element's ID property (if set), which contains a unique identifier for the element, within the document content.

innerHTML
The innerHTML property reflects the content contained by the referenced element, including all the HTML elements. For example, consider the following <ADDRESS> element:

<ADDRESS ID="Address1"> Stephen Le Hunte,<BR> 1, HTMLib Way,<BR> Swansea,<BR> U.K. </ADDRESS>

The address' innerHTML property (obtained by referencing it via its ID property) would be:

Stephen Le Hunte,<BR>1, HTMLib Way,<BR>Swansea,<BR>U.K.<BR>

The innerHTML property has read-write permissions, meaning that HTML content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new HTML content would adopt whatever stylings (and ID) were applied to the referenced element, before the new content was supplied. Note that inappropriate nesting cannot occur when using the innerHTML property. For example, a <BUTTON> cannot contain another <BUTTON> element, so trying to apply some <BUTTON> HTML to the innerHTML property of another <BUTTON> element will fail. Also, note that adding elements through an elements innerHTML property changes the documents All collection and any associated sourceIndex properties.

innerText
Like the innerHTML property described above, the innerText property reflects the content of any referenced element, but without the actual HTML elements included in the content. For example, the innerText property of the above example would be:

Stephen Le Hunte, 1, HTMLib Way, Swansea, U.K.

Note that the <BR> element's are honoured. If the contents of the innerText property were displayed using the alert method (see the Window Object for details), then the displayed message would include such white space (Paragraph elements (<P>) and horizontal rules(<HR>) are other elements that are represented in the innerText property)

The innerText property has read-write permissions, meaning that text content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new text written into the element would adopt whatever stylings (and ID) were applied to the element beforehand.

isTextEdit
The isTextEdit property has a boolean value, reflecting whether or not the referenced element is one that accepts text editing. Currently, this is just <BUTTON>, <TEXTAREA> and <INPUT TYPE="text"> elements. If the referenced element is such an element, then the isTextEdit property value would be true, otherwise it's false. The isTextEdit property is most useful when trying to determine whether the referenced object can have a TextRange Object created from its contents. Those elements that return true can, those that return false can't.

lang
The lang property directly reflects the referenced elements LANG attribute value (if set). LANG is a standard HTML attribute supported by most elements for describing the language of the elements content. For more information, see the Document Localisation topic.

language
The language property reflects the referenced elements LANGUAGE attribute value (if set). As most elements support direct in-line scripting (i.e. using scripting event handlers within the element), the LANGUAGE property is used to explicitly tell the browser which particular scripting language the event handler information is written for. Internet Explorer defaults to using JScript (the Microsoft JavaScript implementation) to attempt to execute in-line script functions.

offsetHeight
The offsetHeight property is read-only and returns a value specifying the height of the referenced element (in pixels), relative to its parent containing element.

offsetLeft
The offsetLeft property is also read-only and returns a pixel value for the referenced elements left offset, relative to its parent containing objects left-most position.

offsetParent
The offsetParent element is read-only and returns a reference to the current referenced elements parent containing element object. This is the element whose positions are used to determine the relative offset* properties for any referenced element.

offsetTop
The offsetTop property is also read-only and returns a pixel value for the referenced elements top offset, relative to its parent containing objects top-most position.

offsetWidth
The offsetWidth property is read-only and returns a value specifying the width of the referenced element (in pixels), relative to its parent containing element.

outerHTML
The outerHTML property is much like the innerHTML property, except that reflects the HTML of the whole element, including any content. For example:

<A HREF="#footnote"><STRONG>Make sure</STRONG> to read the footnotes</A>

would have an innerHTML property of <STRONG>Make sure</STRONG> to read the footnotes, while its outerHTML property would be:

<A HREF="#footnote"><STRONG>Make sure</STRONG> to read the footnotes</A>

I.e., exactly what the element is.

The outerHTML property has read-write permissions, meaning that entire HTML elements can be changed to a different element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The only styling (and ID) information applied to the new element would be whatever is specified in the new contents of the outerHTML property. Note that changing an element through its outerHTML property changes the documents All collection and the referenced elements sourceIndex property.

outerText
Like the innerText property described above, the outerText property reflects text contained in the referenced element. Any text outside the element, is not considered part of the element's content, so the values of the two properties are identical. However, as the outerText property has read-write permissions, entire HTML elements can be replaced with straight text through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content.

parentElement
The parentElement property can be used to obtain a reference to the element immediately preceding the element specified, whose properties and/or methods can be manipulated and/or invoked respectively. Note that the parentElement property is read-only and works on a 'content-model' basis. This means that the parentElement property of elements will be their containing Block Formatting Element, with the parentElement property of BLock formatting elements being the <BODY> element, unless they're contained in another Block-level element.

parentTextEdit
If the isTextEdit property returns false, indicating that the referenced element does not support TextRange object creation, then the parentTextEdit can be used to determine the next element object up in the element hierarchy that does support text editing (and the creation of TextRange objects) and would completely enclose the referenced element in a TextRange object.

recordNumber
When a data bound repeating table is set up (i.e. one that shows only a certain amount of records from a Data Source at any one time), the recordNumber property reflects the current record number, from the data source that the referenced object is displaying. For more information on Data Binding, see the Data Binding topic.

sourceIndex
For each document, Internet Explorer creates an indexed array of all the opening HTML elements. The sourceIndex property reflects the referenced elements position in this array. Essentially, the value returned by the sourceIndex property is identical to the elements index in the All collection. For an example, consider the following document :

<HTML> <HEAD><TITLE>Document Title</TITLE> </HEAD> <BODY> <P>Here's some text, <A HREF="other_page.html">Here's a link</A> </BODY> </HTML>

The anchors sourceIndex property would be 5. The <HTML> element would be 0, the <HEAD> element 1, the <TITLE> element 2 etc.

NOTE : Internet Explorer 4.0 inserts <HTML>, <TITLE>, <HEAD> and <BODY> into the sourceIndex array and All collection regardless of whether they existed in the document or not. Also, <TBODY> elements are inserted after any <TABLE> elements (if no <TBODY> element is set). So, if the above document were modified to :

. . . <P> <TABLE> <TR><TD> Here's some text, <A HREF="other_page.html">Here's a link</A> </TD></TR> </TABLE> . . .

then the anchors sourceIndex property would be 9 (instead of 8 as expected). The sourceIndex property is read-only.

style
The style property reflects any stylings that the referenced element may have. Internet Explorer 4.0 only reflects in-line stylings, included using the STYLE attribute in the opening element and not those attached to an element via a style sheet (within the document, or external).
The style property actually returns a reference to a Style object for the referenced element, whose properties and methods can then be manipulated or invoked. See the Style Object topic for more details.

tagName
The tagName property reflects the actual element name. For example, for anchors, their tagName property is A, <TABLE> returns TABLE etc. The tagName property is read-only and would prove useful for determining a particular element through its sourceIndex property, or its position in the All collection.

title
The title attribute reflects the referenced elements TITLE attribute setting (if set). TITLE attribute values are generally used (in Internet Explorer 4.0) as ToolTips, displayed when the mouse passes over the particular element. It is possible to dynamically change the title property through scripting.

Questions:

Comments: