DOM HTML Elements


In the first part of this chapter, I will try to present you with as many DOM objects as possible. As I stated earlier, this is by no means the entire list of objects that make up the DOM. The objects that I have listed here are some of the most useful or have similar functionality as others in the DOM. If you'd like a more complete list of objects in the DOM, I encourage you to visit the World Wide Web Consortium's Web site at http://www.w3.org/DOM.

Common DOM Properties

These properties, methods, and collections represent the common denominator for all objects in the document object model. Almost all of the objects in the DOM support these properties, methods, and collections to a greater or lesser degree. None of these properties, methods, or collections is supported by Netscape however.

  • className. This property is used to associate an element with a style sheet set of rules grouped together under a class name. Setting this property can provide a shortcut for adjusting many element attributes at once.

  • document. This property is a reference to the document object that contains the current element.

  • id. A unique identifier for the current element. This property is used to assemble references to the element. If more than one element in a document contains the same id, an array is created to hold them all.

  • innerHTML. This property references all the text and HTML tags between the current element's start and end tags. This property can be changed only after the page has fully loaded. This property is not supported by many versions of the Macintosh Internet Explorer.

  • innerText. This property references all the text between the current element's start and end tags. This property can be changed only after the page has fully loaded. This property is not supported by many versions of the Macintosh Internet Explorer.

  • isTextEdit. A boolean value representing whether or not the current element can be used to create a TextRange. Only BODY, BUTTON, INPUT, and TEXTAREA elements can have TextRanges. You can create a TextRange with the createTextRange() method.

  • lang. The language being used for the element's parameter and property values.

  • language. The scripting language being used within the element, i.e., "JavaScript" or "VBScript."

  • offsetHeight, offsetWidth. These properties represent the height and width of the element. In Windows versions of Internet Explorer, margins, borders, and other padding are taken into account when calculating these values. These browsers include the padding into this property not once but twice. If no padding is used, both offsetHeight and offsetWidth are accurate on the Windows and Macintosh platforms.

  • offsetLeft, offsetTop. These properties represent the left and top offsets for the current element in relation to its parent element. Internet Explorer implements these properties very unreliably across operating systems.

  • offsetParent. This property is a reference to the current element's parent element, which is used to generate the coordinate system. For most elements this is the BODY object.

  • outerHTML. All text and HTML tags between and including the current element's start and end tags. This property can be changed only after the page has fully loaded. outerHTML is not supported by many versions of the Macintosh Internet Explorer.

  • outerText. All text, but no HTML tags, of the current element. This property can be changed only after the page has fully loaded. outerText is not supported by many versions of the Macintosh Internet Explorer.

  • parentElement. This property is a reference to the current element's parent element.

  • parentTextEdit. This property is a reference to the next-outermost HTML element that allows a TextRange object to be created with it.

  • sourceIndex. This property is a zero-based index for this element in the document.all collection.

  • style. This property allows the reading and writing of style sheet properties to and from the element.

  • tagName. This property is the name of the tag used to create the current element in all capital letters.

  • title. Internet Explorer renders the value of this property as the tool tip text for the element.

Common DOM Methods

Like all useful objects, the objects in the DOM have many built-in methods that you can use to modify their behavior or the way they look.

  • click(). Simulates a mouse click by the user on the current element.

  • contains(element). Determines whether the current element contains the specified element.

  • getAttribute(attributeName, caseSensitive).. Returns the value of the request attribute owned by the element. caseSensitive is a boolean value that determines whether the capitalization of the attribute is important.

  • insertAdjacentHTML(where, HTML). Inserts the given HTML (or text) either BeforeBegin, AfterBegin, BeforeEnd, or AfterEnd of the current element.

  • insertAdjacentText (where, text). Inserts the given text either BeforeBegin, AfterBegin, BeforeEnd, or AfterEnd of the current element. If HTML tags are included in the text, they are output literally.

  • removeAttribute(attributeName, caseSensitive). Removes the desired attribute from the current element. caseSensitive is a boolean value that determines whether the capitalization of the attribute is important.

  • scrollIntoView(showAtTop). Scrolls the document containing the current element so that the element is brought into view and, optionally, shown at the top of the view space.

  • setAttribute(attributeName, value, caseSenstive). Sets the named attribute with the specified value in the current element. caseSensitive is a boolean value that determines whether the capitalization of the attribute is important.

Common DOM Collections

The following collections are also part of the definition of every object in the DOM:

  • All[]. An array containing all HTML elements contained within the current element.

  • children[]. An array containing all the first-level HTML elements contained within the current element. All the elements on the document that consider the current element their parent are included in this collection.

  • filters[]. An array containing all filter objects contained by the current element.

The <A> Object

Each <A> object is both a member of the document object's link[] and anchor[] collections regardless of if it's an anchor, link, or both. Internet Explorer also lets you reference these objects as a member of the document.all[] collection.

<A>Properties

Each of the following properties is supported by the <A> object, as are the properties common to every object in the DOM.

  • accessKey. A single keyboard character that either brings focus to the element or, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • dataFld. A case-sensitive identifier for a remote data source column. The dataSrc property must also be set.

  • dataSrc. A case-sensitive identifier for the data source to be associated with the element.

  • hash. The part of the URL following the pound (#) symbol that refers to an anchor object in a document.

  • host. The name of the host of the destination document specified by the link. Optionally, the host name can be followed by a colon and the port number.

  • hostname. The name of the host of the destination document specified by the link.

  • href. The URL assigned to the element's HREF attribute.

  • Methods. This property could be used to change the appearance of the anchor tag based on its destination, but Internet Explorer does not appear to do anything with this information.

  • mimeType. Returns the MIME type of the destination document in plain English, for example: JPEG Image.

  • name. This property is the value assigned to the anchor's NAME attribute.

  • nameProp. Returns just the file name of the URL specified by the tag's HREF attribute.

  • pathname. Returns just the path name of the URL specified by the tag's HREF attribute, including the initial forward slash.

  • port. The port number of the host of the destination document specified by the link.

  • protocol. The protocol used by the element's HREF attribute. For example: http:, file:, ftp:, or mailto:.

  • protocolLong. A verbose description of the protocol used by the element's HREF attribute.

  • recordNumer. An integer specifying the record within the data set that created the element.

  • rel. This property currently does nothing.

  • rev. This property currently does nothing.

  • search. The part of the URL starting with the question mark.

  • tabIndex. This property indicates which position this element has in the tab order of the document.

  • target. The name of the window or frame that will receive the new URL as a result of clicking on this link. self is the default value, but can also be one of the following default values: parent, top, or blank.

  • urn. The destination document as a Uniform Resource Name.

<A> Methods

Each of the following methods is supported by the <A> object, as are the methods common to every object in the DOM.

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

<A> Event Handlers

Table 7.1 lists the events that the <A> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.1: <A> Event Handlers

Event Handler

Netscape

Internet Explorer


onblur

4

onclick

2

3

ondblclick

4

4

onfocus

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onmousedown

4

4

onmousemove

4

onmouseout

3

4

onmouseover

2

3

onmouseup

4

4

onselectstart

4

The <ACRONYM>, <CITE>, <CODE>, <DFN>, <EM>, <KBD>, <SAMP>, <STRONG>, and <VAR> Objects

Each of these HTML elements supports the event handlers listed in Table 7.2, as well as their common properties and methods.

Table 7.2: Event Handlers

Event Handler

Netscape

Internet Explorer


onblur

4

onclick

4

ondblclick

4

onfocus

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

4

onmouseup

4

onselectstart

4

The <APPLET> Object

Each <APPLET> object can be referenced directly through the document object such as document.<appletName>.

<APPLET> Properties

Each of the following properties is supported by the <APPLET> object, as are the properties common to every object in the DOM:

  • accessKey. A single keyboard character that either brings focus to the element or, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • align. This property defines the alignment of the element within its container element.

  • altHTML. A HTML message to be displayed if the applet fails to be loaded.

  • code. This property contains the name of the Java applet class file.

  • codeBase. This property contains the path to the directory where the Java applet can be found.

  • DataFld. A case-sensitive identifier for a remote data source column. The dataSrc property must also be set.

  • dataSrc. A case-sensitive identifier for the data source to be associated with the element.

  • width, height. The size of the applet element.

  • hspace, vspace. The number of pixels that surround the applet horizontally and vertically.

  • name. This property holds the unique identifier for the applet.

  • src. This property holds the URL to the Java class file.

  • tabIndex. This property indicates which position this element has in the tab order of the document.

<APPLET> Methods

Each of the following methods is supported by the <APPLET> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

<APPLET> Event Handlers

Table 7.3 lists the events that the <APPLET> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.3: <APPLET> Event Handlers

Event Handler

Netscape

Internet Explorer


onafterupdate

4

onbeforeupdate

4

onblur

4

onclick

3

ondataavailable

4

ondatasetchanged

4

ondatasetcomplete

4

ondblclick

4

onerrorupdate

4

onfocus

4

onhelp

4

ohkeydown

4

onkeypress

4

onkeyup

4

onload

4

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onreadystatechange

4

onresize

4

onrowenter

4

onrowexit

4

The <AREA> Object

The <AREA> object is used to create a clickable image map. Both Internet Explorer and Netscape consider an <AREA> object to be part of the document object's link[] array.

<AREA> Properties

Each of the following properties is supported by the <AREA> object, as are the properties common to every object in the DOM:

  • alt. The value of this property is displayed as the tool tip text for the element.

  • areas. A collection of <AREA> elements sorted in source code order.

  • cords. A comma-separated string of coordinates that defines the outline of the area.

  • hash. The part of the URL following the pound (#) symbol that refers to an anchor object in a document.

  • host. The name of the host of the destination document specified by the link. Optionally, the host name can be followed by a colon and the port number.

  • hostname. The name of the host of the destination document specified by the link.

  • href. The URL assigned to the element's HREF attribute.

<AREA> Methods

Each of the following methods is supported by the <AREA> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

<AREA> Event Handlers

Table 7.4 lists the events that the <AREA> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.4: <AREA> Event Handlers

Event Handler

Netscape

Internet Explorer


ondatasetchanged

4

ondatasetcomplete

4

ondblclick

4

onerrorupdate

4

onfocus

4

onhelp

4

ohkeydown

4

onkeypress

4

onkeyup

4

onload

4

onmousedown

4

onmousemove

4

onmouseout

3

4

onmouseover

3

3

onmouseup

4

onreadystatechange

4

onresize

4

onrowenter

4

onrowexit

4

The <B>, <BIG>, <I>, <S>, <SMALL>, <STRIKE>, <TT>, and <U> Objects

Each of these HTML elements supports the event handlers listed in Table 7.5, as well as their common properties and methods.

Table 7.5: Event Handlers

Event Handler

Netscape

Internet Explorer


onclick

4

ondblclick

4

ondragstart

4

onfilterchange

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

4

onmouseup

4

onselectstart

4

The <BGSOUND> Object

The <BGSOUND> object is not part of any collection, but you can still reference it in Internet Explorer with document.all.<id>. The innerHTML and innerText properties of this object do not apply because it has no closing tag.

<BGSOUND> Properties

Each of the following properties is supported by the <BGSOUND> object, as are the properties common to every object in the DOM:

  • balance. This value represents how the audio is divided between the left and right speakers. This property cannot be set with code. This property contains a value between 10,000 and 10,000. A negative value means more sound is going to the left speaker, and a positive value means more sound is going to the right speaker.

  • loop. The number of times to play the sound. A value of 1 means the sound is looped indefinitely.

  • src. URL of the sound file to be played

  • volume. The volume of the sound being played. A value of 0 means full volume.

    Negative values to 10,000 are less than full volume.

<BGSOUND> Methods

The blur() method, which removes focus from the current element and fires an onBlur event, is supported by the <BGSOUND> object, as are the methods common to every object in the DOM.

The <BODY> Object

The <BODY> object is different from the document object in that a <BODY> object refers to just the element and its nested elements. You can reference the <BODY> object in Internet Explorer with the document.body shortcut.

<BODY> Properties

Each of the following properties is supported by the <BODY> object, as are the properties common to every object in the DOM:

  • accessKey. A single keyboard character that either brings focus to the element of, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • aLink. The color that hypertext links become as they are clicked.

  • background. The URL for the background image for the document.

  • bgColor. The background color for the document.

  • bgProperties. This property determines whether the background image scrolls or appears to be fixed. bgProperties can have one of two values: scroll or fixed.

  • bottomMargin. An integer specifying the number of pixels between the bottom of the visible document and the scroll bar at the bottom of the browser. This value must be zero or greater.

  • clientHeight, clientWidth. The size of the document's contents.

  • clientLeft, clientTop. The offset from the top-left corner of the browser display area.

  • leftMargin. An integer specifying the number of pixels between the left of the visible document and the left side of the browser. This value must be zero or greater.

  • link. The color of hypertext links that have not been visited.

  • noWrap. A boolean value telling the browser to wrap the document content when needed. If this property is set to true, the document will not wrap.

  • recordNumber. Returns an integer representing the record that generated the element.

  • rightMargin. An integer specifying the number of pixels between the right of the visible document and the scroll bar on the side of the browser. This value must be zero or greater.

  • scroll. A boolean value telling the browser whether or not to display scroll bars.

  • scrollHeight, scrollWidth. This property is ambiguous—Microsoft's description of how it is implemented in Internet Explorer and the way in which it is implemented in Netscape do not agree. Therefore, these properties should not be used unless necessary. These two properties represent the visible area of an element that may or may not be covered by scroll bars.

  • scrollLeft, scrollTop. The number of pixels that, due to user scrolling, have been hidden on the top or left of the document.

  • text. The default color for text on the document.

  • topMargin. An integer specifying the number of pixels between the top of the visible document and the top of the browser. This value must be zero or greater.

  • vLink. The color of hypertext links that have been visited recently.

<BODY> Methods

The createTextRange(), which creates a TextRange object from the source code of the current element, is supported by the <BODY> object, as are the methods common to every object in the DOM.

<BODY> Event Handlers

Table 7.6 lists the events that the <BODY> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.6: <BODY> Event Handlers

Event Handler

Netscape

Internet Explorer


onafterupdate

4

onbeforeunload

4

onbeforeupdate

4

onblur

3

4

onclick

4

ondblclick

4

ondragdrop

4

onfocus

3

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onload

2

3

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onmove

4

onresize

4

onrowenter

4

onrowexit

4

onscroll

4

onselect

4

onselectstart

4

onunload

2

3

The <DIV> Object

The <DIV> object can be referenced in Internet Explorer by document.all.<id>. In the Windows version of Internet Explorer 4.x, the client and scroll properties are not available unless the <DIV> object has its position attribute set to absolute.

<DIV> Properties

Each of the following properties is supported by the <DIV> object, as are the properties common to every object in the DOM:

  • align. The horizontal alignment of the elements within the DIV tag. This property can have one of three values: center, left, or right.

  • clientHeight, clientWidth. The size of the element's content.

  • dataFld. Associates a remote data source column name to the DIV element's content.

  • dataFormatAs. Tells the browser how to interpret the data from the remote data source. This property can have one of two values, text or HTML.

  • dataSrc. Used to bind a remote data source to the element. This property will contain the name of the remove ODBC source, such as an Oracle or SQL database.

  • scrollHeight, scrollWidth. These two properties represent the visible area of an element that may or may not be covered by scroll bars. They are ambiguous— Microsoft's description of how they are implemented in Internet Explorer and the way in which they are implemented in Netscape do not agree. Therefore, these properties should not be used unless necessary.

  • scrollLeft, scrollTop. The number of pixels that, due to user scrolling, have been hidden on the top or left of the document.

<DIV> Methods

Each of the following methods is supported by the <DIV> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

<DIV> Event Handlers

Table 7.7 lists the events that the <DIV> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.7: <DIV> Event Handlers

Event Handler

Netscape

Internet Explorer


onafterupdate

4

onbeforeupdate

4

onblur

3

4

onclick

4

ondblclick

4

ondragstart

4

onfocus

3

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onload

2

3

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onresize

4

onrowenter

4

onrowexit

4

onscroll

4

onselectstart

4

The <EMBED> Object

The <EMBED> object can be referenced by document.<elementName> in Netscape Navigator or by document.all.<id> in Internet Explorer.

<EMBED> Properties

Each of the following properties is supported by the <EMBED> object, as are the properties common to every object in the DOM:

  • accessKey. A single keyboard character that either brings focus to the element or, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • clientHeight, clientWidth. The size of the document's content

  • clientLeft, clientTop. The offset from the top-left corner of the browser display area.

  • hidden. A boolean value specifying if the control panel for the embedded data is visible.

  • name. This property is used by both Internet Explorer and Netscape to reference the element. With Netscape, however, this property is read-only.

  • palette. Returns the value of the PALETTE attribute that was used with the EMBED element.

  • pluginspage. The URL at which the required plug-in can be downloaded so that the embedded data can be displayed.

  • readyState. Returns the current status of the download process for embedded data. When this property changes, an onReadyStateChange event is fired.

  • src. A URL where the file containing the embedded data can be retrieved.

  • tabIndex. This property indicates which position this element has in the tab order of the document.

  • units. The unit of measurement for the height and width of the embedded data area. This property can have one of three values: pixels, px, or em.

<EMBED> Methods

Each of the following methods is supported by the <EMBED> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

The <IMG> Object

The <IMG> object was one of the first objects to be used to create dynamic effects on Web pages. Each <IMG> object is in the document object's images[] collection or can be referenced by document.<imageName>.

<IMG> Properties

Each of the following properties is supported by the <IMG> object, as are the properties common to every object in the DOM:

  • align. Specifies how the image is aligned relative to the surrounding text. This property can have one of nine values: absbottom, absmiddle, baseline, bottom, right, left, none, texttop, or top.

  • alt. The text that is displayed if the image fails to load or is in the process of being downloaded.

  • border. The thickness of the image border in pixels.

  • complete. A boolean value that is used to determine if the image has completely downloaded or not.

  • dataFld. Associates a remote data source column name to the DIV element's content.

  • dataSrc. Used to bind a remote data source to the element. This property will contain the name of the remove ODBC source, such as an Oracle or SQL database.

  • dynsrc. The URL of the video clip to be played through the IMG element.

  • height, width. The size of the image when it is displayed on the browser.

  • href. The URL of the image to be displayed. Identical to the src property.

  • hspace, vspace. The horizontal and vertical padding for the image.

  • isMap. Used to determine if the image is using a server-side image map.

  • loop. How many times the video specified with the dynsrc property is looped. The value of 1 means the video will loop indefinitely.

  • lowsrc. The URL to the lower-resolution image that will be displayed if the image specified by the src property takes a long time to load.

  • name. An identifier used to reference the image via scripts.

  • protocol. This property does not appear to work properly. Instead of returning the value file:, it returns File Protocol.

  • readyState. Returns the current status of the download process for the image. When this property changes, a onReadyStateChange event is fired.

  • useMap. The URL to the MAP element that is used to create hot spots and links on this image.

  • x, y. The coordinates of the image in relation to the document. Netscape only.

<IMG> Methods

Each of the following methods is supported by the <IMG> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

<IMG> Event Handlers

Table 7.8 lists the events that the <IMG> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.8: <IMG> Event Handlers

Event Handler

Netscape

Internet Explorer


onabort

3

4

onafterupdate

4

onbeforeupdate

4

onblur

3

4

onclick

4

ondblclick

4

ondragstart

4

onerror

3

4

onfocus

3

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onload

2

3

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onresize

4

onrowenter

4

onrowexit

4

onscroll

4

onselectstart

4

The <OBJECT> Object

Using the <OBJECT> object is an updated way of embedding external data into a Web page. You can reference an <OBJECT> object with document.all.<id> in Internet Explorer.

<OBJECT> Properties

Each of the following properties is supported by the <OBJECT> object, as are the properties common to every object in the DOM:

  • accessKey. A single keyboard character that either brings focus to the element or, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • align. Specifies how the image is aligned relative to the surrounding text. This property can have one of nine values: absbottom, absmiddle, baseline, bottom, right, left, none, texttop, or top.

  • altHTML. Alternate HTML to display if the object fails to load.

  • classid The URL of the object's implementation.

  • code. The name of the Java .class file.

  • codeBase. This property contains the path to the directory where the Java applet can be found.

  • codeType. The MIME type of the object referenced by the object's classid property. A list of all common MIME types can be found at: ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/

  • data. The URL for the file that contains the data for this object element.

  • dataFld. A case-sensitive identifier for a remote data source column. The dataSrc property must also be set.

  • dataSrc. A case-sensitive identifier for the data source to be associated with the element.

  • form. A reference to the FORM element that contains the current object element, if there is one.

  • width, height. The size of the applet element.

  • hspace, vspace. The number of pixels that surround the applet horizontally and vertically.

  • name. This property holds the unique identifier for the object.

  • object. This property tells the interpreter to get the property of the HTML object element instead of the internal JavaScript object's property.

  • readyState. Returns the current status of the download process for the object's content. When this property changes, a onReadyStateChange event is fired.

  • tabIndex. This property indicates which position this element has in the tab order of the document.

  • type. The MIME type of the object's external data.

<OBJECT> Event Handlers

Table 7.9 lists the events that the <OBJECT> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.9: <OBJECT> Event Handlers

Event Handler

Netscape

Internet Explorer


onafterupdate

4

onbeforeupdate

4

onblur

3

4

onclick

4

ondblclick

4

ondragstart

4

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onreadystatechange

4

onresize

4

onrowenter

4

onrowexit

4

onselectstart

4

The <SELECT> Object

The <SELECT> object is a form element that contains OPTION elements. The properties innerHTML and innerText are not available in the Macintosh version of Internet Explorer 4. A <SELECT> object can be referenced one of two ways: document.<formName>.<elementName> or document.form[i].element[i].

<SELECT> Properties

Each of the following properties is supported by the <SELECT> object, as are the properties common to every object in the DOM:

  • accessKey. A single keyboard character that either brings focus to the element or, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • dataFld. A case-sensitive identifier for a remote data source column. The dataSrc property must also be set.

  • dataSrc. A case-sensitive identifier for the data source to be associated with the element.

  • disabled. A boolean flag indicating whether the element is disabled. If this property is set to true, no events will be generated for this event and its GUI representation will appear grayed-out.

  • form. A reference to the FORM element that contains the current select element, if there is one.

  • length. The number of option objects nested inside the select object.

  • multiple. A flag that determines if multiple selection is possible with this select object.

  • form. A reference to the FORM element that contains the current Object element, if there is one.

  • name. This property holds the unique identifier for the Select object.

  • options[]. An array holding all the Option objects contained by the Select object.

  • recordNumber. An integer representing the record within the dataset that generated the element.

  • selectedIndex. The first selected option in the Select object.

  • tabIndex. This property indicates which position this element has in the tab order of the document.

  • type. The type of element. This property can have one of many values: button, checkbox, file, hidden, image, password, radio, reset, select-multiple, select-one, submit, text, or textarea.

  • value. This property is the value of the selected Option object within the Select object.

<SELECT> Methods

Each of the following methods is supported by the <SELECT> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • focus(). Gives the focus to the current element.

<SELECT> Event Handlers

Table 7.10 lists the events that the <SELECT> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.10: <SELECT> Event Handlers

Event Handler

Netscape

Internet Explorer


onafterupdate

4

onbeforeupdate

4

onblur

3

4

onchange

2

3

onclick

4

ondblclick

4

ondragstart

4

onfocus

2

3

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onrowenter

4

onrowexit

4

onselectstart

4

The <TEXTAREA> Object

The <TEXTAREA> object is a form element that allows a user to input multiple lines of text for submission to a server. The innerHTML property for this object is not available in the Macintosh version of Internet Explorer 4. A <TEXTAREA> object can be referenced one of two ways: document.<formName>.<elementName> or document.form[i].element[i].

<TEXTAREA> Options

Each of the following properties is supported by the <TEXTAREA> object, as are the properties common to every object in the DOM:

  • accessKey. A single keyboard character that either brings focus to the element or, as with the case of the anchor tag, follows a link. An access key, determined by the browser or operating system, is generally required.

  • clientHeight, clientWidth. The size of the document's content.

  • clientLeft, clientTop. The offset from the top-left corner of the browser display area.

  • cols. The width of the editable area on the text area. This value represents the number of mono-spaced characters that can fit on one row of the text area.

  • dataFld. A case-sensitive identifier for a remote data source column. The dataSrc property must also be set.

  • dataSrc. A case-sensitive identifier for the data source to be associated with the element.

  • defaultValue. The default text displayed within the text area that is displayed when the page first loads.

  • disabled. A boolean flag indicating if the element is disabled. If this property is set to true not events will be generated for this event and its GUI representation will appear grayed-out.

  • form. A reference to the FORM element that contains the current Object element, if there is one.

  • name. This property holds the unique identifier for the Select object.

  • readOnly. A flag representing whether or not the text within the text area can be changed.

  • rows. The number of rows in the text area.

  • scrollHeight, scrollWidth. These two properties represent the visible area of an element that may or may not be covered by scroll bars. They are ambiguous— Microsoft's description of how they are implemented in Internet Explorer and the way in which they are implemented in Netscape do not agree. Therefore, these properties should not be used unless necessary.

  • scrollLeft, scrollTop. The number of pixels that, due to user scrolling, have been hidden on the top or left of the document.

  • tabIndex. This property indicates which position this element has in the tab order of the document.

  • type. The type of element. This property can have one of many values: button, checkbox, file, hidden, image, password, radio, reset, select-multiple, select-one, submit, text, or textarea.

  • value. This property is the value of the selected Option object within the Select object.

  • wrap. The type of word wrapping that the text area submits to the server. This property can have one of three values: physical, off, or virtual.

<TEXTAREA> Methods

Each of the following methods is supported by the <TEXTAREA> object, as are the methods common to every object in the DOM:

  • blur(). Removes focus from the current element and fires an onBlur event.

  • createTextRange(). Creates a TextRange object from the source code of the current element.

  • focus(). Gives the focus to the current element.

  • handleEvent(event). Instructs the object to process the give event.

  • select(). Selects all the text contained within the text area.

<TEXTAREA> Event Handlers

Table 7.11 lists the events that the <TEXTAREA> object can capture. The first column lists the name of the event, and the next two columns list the earliest browser version to support the event.

Table 7.11: <TEXTAREA> Event Handlers

Event Handler

Netscape

Internet Explorer


onafterupdate

4

onbeforeupdate

4

onblur

3

4

onchange

2

3

onclick

4

ondblclick

4

ondragstart

4

onfocus

2

3

onhelp

4

onkeydown

4

onkeypress

4

onkeyup

4

onmousedown

4

onmousemove

4

onmouseout

4

onmouseover

3

onmouseup

4

onresize

4

onrowenter

4

onrowexit

4

onscroll

3

onselect

2

3

onselectstart

4




JavaScript Professional Projects
JavaScript Professional Projects
ISBN: 1592000134
EAN: 2147483647
Year: 2002
Pages: 130
Authors: Paul Hatcher

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net