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
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 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
<A HREF="warning.htm" CLASS="warning">Read the warning first</A>
className property would be
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 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 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 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 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 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">
. . .
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 property reflects the referenced element's
ID property (if set), which contains a unique identifier for the element, within the document content.
innerHTML property reflects the content contained by the referenced element, including all the HTML elements. For example, consider the following
Stephen Le Hunte,<BR>
1, HTMLib Way,<BR>
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>
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
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,
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 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 property has a boolean value, reflecting whether or not the referenced element is one that accepts text editing. Currently, this is just
<INPUT TYPE="text"> elements. If the referenced element is such an element, then the
isTextEdit property value would be
true, otherwise it's
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 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 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
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 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 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 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 property is read-only and returns a value specifying the width of the referenced element (in pixels), relative to its parent containing element.
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.
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
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 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.
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.
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.
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 :
<P>Here's some text, <A HREF="other_page.html">Here's a link</A>
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
<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 :
. . .
Here's some text, <A HREF="other_page.html">Here's a link</A>
. . .
then the anchors
sourceIndex property would be 9 (instead of 8 as expected). The
sourceIndex property is read-only.
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).
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 property reflects the actual element name. For example, for anchors, their
tagName property is
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 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.
© 1995-1998, Stephen Le Hunte