This chapter extends the DOM Level 2 Core API to describe objects and methods specific to HTML documents. In general, the functionality needed to manipulate hierarchical document structures, elements, and attributes will be found in the core section; functionality that depends on the specific elements defined in HTML will be found in this chapter.
The goals of the HTML-specific DOM API are
• To specialize and add functionality that relates specifically to HTML documents and elements.
• To address issues of backward compatibility with the DOM Level 0.
• To provide convenience mechanisms, where appropriate, for common and frequent operations on HTML documents.
The key differences between the core DOM and the HTML application of DOM is that the HTML Document Object Model exposes a number of convenience methods and properties that are consistent with the existing DOM Level 1 and 0 models and are more appropriate to script writers. In many cases, these enhancements aren’t applicable to a general DOM because they rely on the presence of a predefined DTD. The transitional and frameset DTDs for HTML 4.0 are assumed. Interoperability between implementations is only guaranteed for elements and attributes that are specified in the HTML 4.0 DTDs.
More specifically, this document includes the following specializations for HTML:
• An HTMLDocument interface, derived from the core Document interface. HTMLDocument specifies the operations and queries that can be made on a HTML document.
• An HTMLElement interface, derived from the core Element interface. HTMLElement specifies the operations and queries that can be made on any HTML element. Methods on HTMLElement include those that allow for the retrieval and modification of attributes that apply to all HTML elements.
• Specializations for all HTML elements that have attributes that extend beyond those specified in the HTMLElement interface. For all such attributes, the derived interface for the element contains explicit methods for setting and getting the values.
• The DOM Level 2 includes mechanisms to access and modify style specified through CSS and defines an event model that can be used with HTML documents.
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
The HTMLAnchorElement
object represents an HTML anchor element. The HTMLAnchorElement
inherits all methods and properties from the HTMLElement
object. Table 11.1 contains a list of properties and methods for this object.
Listing 11.1 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object element and then setting its Alink
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.accessKey
The accessKey
property of the HTMLAnchorElement
object is a single character access key to give access to the form control.
Listing 11.2 illustrates the creation of an HTMLAnchorElement
using the HTMLDocument
object element and then setting its accessKey
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.accessKey = "A";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.blur()
The blur()
method of the HTMLAnchorElement
object removes keyboard focus from this element.
Listing 11.3 illustrates the creation of an HTMLAnchorElement
using the HTMLDocument
object element and then calling its blur()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.blur();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.charset
The charset
property of the HTMLAnchorElement
object represents the character encoding of the linked resource.
Listing 11.4 illustrates the creation of an HTMLAnchorElement
object using the HTMLBodyElement
object and then setting its charset
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.charSet = "us/english";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.coords
The coords
property of the HTMLAnchorElement
object is a comma-separated list of lengths, defining an active region’s geometry. See also shape for the shape of the region.
Listing 11.5 illustrates the creation of an HTMLAnchorElement
object using the HTMLBodyElement
object and then setting its coords
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.coords = "12,34,10, 10";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.focus()
The focus()
method of the HTMLAnchorElement
object gives keyboard focus to this element.
Listing 11.6 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and the invocation of its focus()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.focus();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.href
The href
property of the HTMLAnchorElement
object represents the URI of the linked resource.
Listing 11.7 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and then setting its href
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.href = "http://foo.bar/";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.hrefLang
The hrefLang
property of the HTMLAnchorElement
object represents the language code of the linked resource.
Listing 11.8 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object element and then setting its hrefLang
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.hrefLang = "us/english";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.name
The name
property of the HTMLAnchorElement
object represents the anchor name.
Listing 11.9 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.name = "Link to foo site";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.rel
The rel
property of the HTMLAnchorElement
object represents a forward link type.
Listing 11.10 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object element and then setting its rel
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.rel = "http://foo.bar/link.htm";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.rev
The rev
property of the HTMLAnchorElement
object represents a reverse link type.
Listing 11.11 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and then setting its rev
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.rev = "http://foo.bar/link.htm";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.shape
The shape
property of the HTMLAnchorElement
object represents the shape of the active area. The coordinates are given by coords.
Listing 11.12 illustrates the creation of an HTMLAnchorElement
using the HTMLBody
object and then setting its shape
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.shape = "oval";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.tabIndex
The tabIndex
property of the HTMLAnchorElement
object represents the index that represents the element’s position in the tabbing order.
Listing 11.13 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and then setting its tabIndex
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.tabIndex = 3;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.target
The target
property of the HTMLAnchorElement
object represents the frame to render the resource in.
Listing 11.14 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and then setting its target
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.target = "frame1";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAnchorObj.type
The type
property of the HTMLAnchorElement
object represents an advisory content type.
Listing 11.15 illustrates the creation of an HTMLAnchorElement
using the HTMLBodyElement
object and then setting its type
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var anchorObj = bodyObj.createElement("a");
anchorObj.type = "text/html";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML applet element. The HTMLAppletElement
inherits all properties and methods of the HTMLElement
object. Table 11.2 contains a list of properties and methods for this object.
Listing 11.16 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.align
The align
property of the HTMLAppletElement
object aligns this object (vertically or horizontally) with respect to its surrounding text.
Listing 11.17 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.align = "bottom";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.alt
The alt
property of the HTMLAppletElement
object represents the alternate text for user agents not rendering the normal content of this element.
Listing 11.18 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its alt
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.alt = "Cannot display applet!";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.archive
The archive
property of the HTMLAppletElement
object is a comma-separated archive list.
Listing 11.19 illustrates the creation of an HTMLAppletElement
using the HTMLBodyObject
object and then setting its archive
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.archive = "foo.jar,bar.jar";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.code
The code
property of the HTMLAppletElement
object is the applet class file.
Listing 11.20 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object element and then setting its code
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.code = "foo.bar.applets.FooApplet";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.codeBase
The codeBase
property of the HTMLAppletElement
object is an optional base URI for applet.
Listing 11.21 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its codeBase
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.codebase = "http://foo.bar/applets/";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.height
The height
property of the HTMLAppletElement
object allows you to override height.
Listing 11.22 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its height
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.height = "25";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.hspace
The hspace
property of the HTMLAppletElement
object represents the horizontal space to the left and right of this applet.
Listing 11.23 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its hspace
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.hspace = 2;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.name
The name
property of the HTMLAppletElement
object contains the name of the applet.
Listing 11.24 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.name = "color selector applet";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.object
The object
property of the HTMLAppletElement
object represents the serialized applet file.
Listing 11.25 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its object
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.object = "http://foo.bar/applets/colorapplet.ser"
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.vspace
The vspace
property of the HTMLAppletElement
object represents the vertical space above and below the applet.
Listing 11.26 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its vspace
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.vspace = 5;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAppletObj.width
The width
property of the HTMLAppletElement
object allows you to override width.
Listing 11.27 illustrates the creation of an HTMLAppletElement
using the HTMLBodyElement
object and then setting its width
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var appletObj = bodyObj.createElement("applet");
appletObj.width = 30;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML area element. Table 11.3 contains a list of properties and methods for this object.
Listing 11.28 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its accessKey
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.accessKey
The accessKey
property of the HTMLAreaElement
object is a single character access key to give access to the form control.
Listing 11.29 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its accessKey
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.AccessKey = "Z";// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.alt
The alt
property of the HTMLAreaElement
object represents the alternate text for user agents not rendering the normal content of this element.
Listing 11.30 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object element and then setting its alt
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.alt = "here is area 1";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.coords
The coords
property of the HTMLAreaElement
object is a comma-separated list of lengths, defining an active region’s geometry.
Listing 11.31 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its coords
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.coords = "23,45,34,44";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.href
The href
property of the HTMLAreaElement
object represents the URI of the linked resource.
Listing 11.32 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its href
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.href = "http://foo.bar/link.html";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.noHref
The noHref
property of the HTMLAreaElement
object specifies that this area is inactive; that is, it has no associated action.
Listing 11.33 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its noHref
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.noHref = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.shape
The shape
property of the HTMLAreaElement
object represents the shape of the active area. The coordinates are given by coordinates.
Listing 11.34 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its shape
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.cCreateElement("area");
areaObj.shape = "rect";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.tabIndex
The tabIndex
property of the HTMLAreaElement
object is a index that represents the element’s position in the tabbing order.
Listing 11.35 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its tabIndex
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.TabIndex = 3;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlAreaObj.target
The target
property of the HTMLAreaElement
object represents the frame to render the resource in.
Listing 11.36 illustrates the creation of an HTMLAreaElement
using the HTMLMapElement
object and then setting its target
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var mapObj = bodyObj.createElement("map");
var areaObj = mapObj.createElement("area");
areaObj.target = "mainframe";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
The HTMLBaseElement
object encapsulates the Document base URI. HTMLBaseElement
inherits all methods and properties from HTMLElement
. Table 11.4 contains a list of properties and methods for this object.
Listing 11.37 illustrates the creation of an HTMLBaseElement
using the HTMLDocument object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var baseElement = htmlDoc.createElement("base");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBaseElemObj.href
The href
property of the HTMLBaseElement
object represents the base URI for this element.
Listing 11.38 illustrates the creation of an HTMLBaseElement
using the HTMLDocument
object element and then setting its href
and target
properties.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var baseElement = htmlDoc.createElement("base");
baseElement.href = "http://foo.bar/";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBaseElemObj.target
The target
property of the HTMLBaseElement
object represents the default target frame.
Listing 11.39 illustrates the creation of an HTMlBaseElement
using the HTMLDocument
object element and then setting its target
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var baseElement = htmlDoc.createElement("base");
baseElement.target = "MainFrame";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML BASEFONT
element. The HTMLBaseFontElement
inherits all methods and properties from the HTMLElement
object. Table 11.5 contains a list of properties for this object.
Listing 11.40 illustrates the creation of an HTMLBaseFontElement
using the HTMLBodyElement
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var baseFontObj = bodyObj.createElement("basefont");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBaseFontObj.color
The color
property of the HTMLBaseFontElement
object represents the color of this font.
Listing 11.41 illustrates the creation of an HTMLBaseFontElement
using the HTMLBody
object and then setting its color
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var baseFontObj = bodyObj.createElement("basefont");
baseFontObj.color = "#FFFFFF";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBaseFontObj.face
The face
property of the HTMLBaseFontElement
object is the font face identifier.
Listing 11.42 illustrates the creation of an HTMLBaseFontElement
using the HTMLBodyElement
object and then setting its face
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var baseFontObj = bodyObj.createElement("basefont");
baseFontObj.face = "courier";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBaseFontObj.size
The size
property of the HTMLBaseFontElement
object is the font size.
Listing 11.43 illustrates the creation of an HTMLBaseFontElement
using the HTMLBodyElement
object and then setting its size
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var baseFontObj = bodyObj.createElement("basefont");
baseFontObj.size = 12;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object encapsulates the HTML document body. This element is always present in the DOM API, even if the tags are not present in the source document.HTMLBodyElement
inherits all methods and properties from HTMLElement
. Table 11.6 contains a list of properties for this object.
Listing 11.44 illustrates the creation of an HTMLBodyElement
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBodyObj.aLink
The aLink
property of the HTMLBodyElement
object represents the color of active links (after mouse button down, but before mouse button up).
Listing 11.45 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object element and then setting its aLink
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
bodyObj.aLink = "#FF0000"
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBodyObj.background
The background
property of the HTMLBodyElement
object is the URI of the background texture tile image.
Listing 11.46 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object and then setting its background
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
bodyObj.background = "http://foo.bar/images/tile.jpg"
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBodyObj.bgColor
The bgColor
property of the HTMLBodyElement
object is the document background color.
Listing 11.47 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object element and then setting its bgColor
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
bodyObj.bgColor = "#FFFFFF";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBodyObj.link
The link
property of the HTMLBodyElement
object is the color of links that are inactive and unvisited.
Listing 11.48 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object element and then setting its link
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
bodyObj.link = "#000066"
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBodyObj.text
The text
property of the HTMLBodyElement
object is the document text color.
Listing 11.49 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object element and then setting its text
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
bodyObj.text = "#000000"
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBodyObj.vLink
The vLink
property of the HTMLBodyElement
object represents the color of links that have been visited by the user.
Listing 11.50 illustrates the creation of an HTMLBodyElement
using the HTMLDocument
object element and then setting its vLink
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
bodyObj.vLink = "#6666CC"
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents the HTML element that forces a line break. The HTMLBRElement
inherits all methods and properties of the HTMLElement
object. The property for this object is as follows:
Listing 11.51 illustrates the creation of an HTMLBRElement
using the HTMLBodyElement
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var brObj = bodyObj.createElement("br");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlBRObj.clear
The clear
property of the HTMLBRElement
object controls flow of text around floats.
Listing 11.52 illustrates the creation of an HTMLBRElement
using the HTMLBodyElement
object and then setting its clear
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var brObj = bodyObj.createElement("br");
brObj.clear = "left";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML button element. It inherits all methods and properties of the HTMLElement
object. Table 11.7 contains a list of properties for this object.
Listing 11.53 illustrates the creation of a HTMLButtonElement
using a HTMLFormElement
and setting its type
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
var buttonObj = formObj.createElement("button");
buttonObj.type = "submit";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.accessKey
The accessKey
property of the HTMLButtonElement
object is a single character access key to give access to the form control.
Listing 11.54 illustrates the creation of an HTMLButtonElement
using the HTMLFormElement
object and then setting its accessKey
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
buttonObj.accessKey = "B";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.disabled
The disable
property of the HTMLButtonElement
object allows you to disable button instances.
Listing 11.55 illustrates the creation of an HTMLButtonElement
using the HTMLFormElement
object and then setting its disabled
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
buttonObj.disabled = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.form
The form
property of the HTMLButtonElement
object returns the FORM
element containing this control. It returns Null
if this control isn’t within the context of a form.
Listing 11.56 illustrates the creation of an HTMLButtonElement
using the HTMLFormElement
object and then reading its form
Property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
if(buttonObj.form.name == "emailForm")
processEmail(buttonObj.form);
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.name
The name
property of the HTMLButtonElement
object represents a form control or object name when submitted with a form.
Listing 11.57 illustrates the creation of an HTMLButtonElement
using the HTMLFormElement
object and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
buttonObj.name = "foo";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.tabIndex
The tabIndex
property of the HTMLButtonElement
object is the index that represents the element’s position in the tabbing order.
Listing 11.58 illustrates the creation of an HTMLButtonElement
using theHTMLFormElement
object and then setting its tabIndex
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
buttonObj.tabIndex = 10;
// -->
</script>
</html><html> <script language="JavaScript" type="text/javascript"> <!--var buttonObj = formObj.createElement("button"); buttonObj.tabIndex = 10; // --> </script> </html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.type
The type
property of the HTMLButtonElement
object represents the type of button.
Listing 11.59 illustrates the creation of an HTMLButtonElement
using theHTMLFormElement
object element and then setting its type
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
buttonObj.type = "submit";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlButtonObj.value
The value
property of the HTMLButtonElement
object is the current form control value.
Listing 11.60 illustrates the creation of an HTMLButtonElement
using theHTMLFormElement
object element and then setting its value
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var buttonObj = formObj.createElement("button");
buttonObj.type = "submit";
buttonObj.value = "Submit";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
An HTMLCollection
is a list of nodes. An individual node can be accessed by either ordinal index or the node’s name or ID attributes.
Table 11.8 contains a list of the property and methods for this object.
Listing 11.61 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object then iterating through that document’s images
property processing each image.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocImages = htmlDoc.images;
var i = 0;
while(i < htmlDocImages.length) {
var image = htmlDocImages.item(i);
processImageSrc(imageSrc);
i++;
}
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlCollectionObj.item(
index)
The item()
method of the HTMLCollection
object retrieves a node specified by number index. Nodes are numbered in tree order (depth-first traversal order).
Listing 11.63 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and then iterating through that document’s images
property processing each image.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocImages = htmlDoc.images;
var i = 0;
while(i < htmlDocImages.length) {
var image = htmlDocImages.item(i);
processImageSrc(imageSrc);
i++;
}
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlCollectionObj.length
The length
property of the HTMLCollection
object specifies the length or size of the list.
Listing 11.62 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and then iterating through that document’s images
property processing each image.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocImages = htmlDoc.images;
var i = 0;
while(i < htmlDocImages.length) {
var image = htmlDocImages.item(i);
processImageSrc(imageSrc);
i++;
}
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlCollectionObj.namedItem(
name)
The namedItem()
method of the HTMLCollection
object retrieves a Node
using a name. It first searches for a Node
with a matching ID attribute. If it doesn’t find one, it then searches for a Node
with a matching name attribute, but only on those elements that are allowed a name attribute.
Listing 11.64 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and the iteration through that document’s images
property processing each image.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocImages = htmlDoc.images;
var i = 0;
while(i < htmlDocImages.Length) {
var image = htmlDocImages.namedItem("iconImage");
processImageSrc(imageSrc);
i++;
}
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML directory element. The HTMLDirectoryElement
object inherits all methods and properties from HTMLElement
. The property for this object is as follows:
Listing 11.65 illustrates the creation of an HTMLDirectoryElement
using theHTMLDListElement
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var dListObj = bodyObj.createElement("dlist");
var directoryObj = dListObj.createElement("directory");
// -->
</script>
</html>
<html> <script language="JavaScript" type="text/javascript"> <!--var dListObj = bodyObj.createElement("dlist"); var directoryObj = dListObj.createElement("directory");
// --> </script> </html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDirectoryObj.compact
The compact
property of the HTMLDirectoryElement
object reduces the spacing between list items.
Listing 11.66 illustrates the creation of an HTMLDirectoryElement
using theHTMLDListElement
object and then setting its compact
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var dListObj = bodyObj.createElement("dlist");
var directoryObj = dListObj.createElement("directory");
directoryObj.compact = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML generic block container. The HTMLDivElement
object inherits all methods and properties from HTMLElement
. The property for this object is as follows:
Listing 11.67 illustrates the creation of an HTMLDivElement
using theHTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var divObj = bodyObj.createElement("div");
divObj.align = "top";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDivObj.align
The align
property of the HTMLDivElement
object represents the horizontal text alignment.
Listing 11.68 illustrates the creation of an HTMLDivElement
using theHTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var divObj = bodyObj.createElement("div");
divObj.align = "botton";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML directory list element. The HTMLDListElement
object inherits all methods and properties from HTMLElement
. The property for this object is as follows:
Listing 11.69 illustrates the creation of an HTMLDListElement
using theHTMLBodyElement
object element and then setting its compact
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var dListObj = bodyObj.createElement("dlist");
dListObj.compact = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDListObj.compact
The compact
property of the HTMLDListElement
object reduces the spacing between list items.
Listing 11.70 illustrates the creation of an HTMLDListElement
using theHTMLBodyElement
object element and then setting its compact
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var dListObj = bodyObj.createElement("dlist");
dListObj.compact = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
An HTMLDocument
is the root of the HTML hierarchy and holds the entire content. Besides providing access to the hierarchy, it also provides some convenience methods for accessing certain sets of information from the document. Table 11.9 contains a list of properties and methods for this object.
Listing 11.71 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textArea = htmlDoc.createElement("textarea");
textArea.value = "Here's some text in a TEXTAREA");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.anchors
The anchors
property of the HTMLDocument
object is a collection of all the anchor (A
) elements in a document with a value for the name attribute.
Listing 11.72 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object then iterating through that document’s anchors
property processing each anchor element.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocAnchors = htmlDoc.anchors;
var i = 0;
while(i < htmlDocAnchors.length) {
var anchor = htmlDocAnchors.item(i);
processAnchor(anchor);
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.applets
The applets
property of the HTMLDocument
object is a collection of all the OBJECT
elements that include applets and APPLET
(deprecated) elements in a document.
Listing 11.73 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object then iterating through that document’s applets
property processing each applet.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocApplets = htmlDoc.applets;
var i = 0;
while(i < htmlDocApplets.length) {
var applet = htmlDocImages.item(i);
processImageSrc(applet);
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.body
The body
property of the HTMLDocument
object is the element that contains the content for the document. In documents with BODY
contents, this returns the BODY
element. In frameset documents, this returns the outermost FRAMESET
element.
Listing 11.74 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
and then changes the background color of the body
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var docBody = htmlDoc.body;
docBody.bgColor = "#FFFFFF";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.close()
The close()
method of the HTMLDocument
object closes a document stream opened by open()
and forces rendering.
Listing 11.75 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object and then using the open()
method to open this document for writing. A cookie
is added and then the document is closed using close()
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
htmlDoc.cookie = "sessionId=3213;expires=34283028"
htmlDoc.close();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.cookie
The cookie
property of the HTMLDocument
object represents the cookies associated with this document. If there are none, the value is an empty string. Otherwise, the value is a string: a semicolon-delimited list of name=value
pairs for all the cookies associated with the page; for example, name=value;expires=date
.
Listing 11.76 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object and then accessing the cookie
property and setting its value.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
htmlDoc.cookie = "sessionId=3213;expires=34283028"
}
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.domain
The domain
property of the HTMLDocument
object represents the domain name of the server that served the document, or Null
if the server cannot be identified by a domain name.
Listing 11.77 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
and then inspects the domain
property to see which domain the page originated from.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
if(htmlDoc.domain == "foo.bar")
cameFromFooBar = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.forms
The forms
property of the HTMLDocument
object is a collection of all the forms of a document.
Listing 11.78 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and then iterating through that document’s forms
property processing the form with the name "emailForm"
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocForms = htmlDoc.forms;
var i = 0;
while(i < htmlDocForms.length) {
var form = htmlDocforms.Item(i);
if(form.name == "emailForm")
processEmailForm(form);
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.getElementsByName(
name )
The getElementsByName()
method of the HTMLDocument
object returns the (possibly empty) collection of elements whose name value is given by name.
Listing 11.79 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object and then iterating through that document’s list of images using the getElementsByName()
method processing each image element.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var imageList = htmlDoc.getElementsByName("image");
var i = 0;
while(i < imageList.length) {
var image = imageList.item(i);
processImage(image);
i++;
}
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.images
The images
property of the HTMLDocument
object is a collection of all the IMG elements in a document. The behavior is limited to IMG elements for backward compatibility.
Listing 11.80 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object and then iterating through that document’s images
property processing each image.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocImages = htmlDoc.images;
var i = 0;
while(i < htmlDocImages.length) {
var image = htmlDocImages.namedItem("iconImage");
processImageSrc(imageSrc);
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.links
The links
property of the HTMLDocument
object is a collection of all AREA
elements and anchor (A
) elements in a document with a value for the href attribute.
Listing 11.81 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and then iterating through that document’s links
property processing each applet.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var htmlDocLinks = htmlDoc.links;
var i = 0;
while(i < htmlDocApplets.length) {
var link = htmlDocLinks.item(i);
processLink(link);
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.open()
The open()
method of the HTMLDocument
object is used to open a document stream for writing. If a document exists in the target, this method clears it.
Listing 11.82 illustrates the creation of an HTMLDocument
using the HTMLDOMImplementation
object and then using the open()
method to open this document for writing.
<html> <script language="JavaScript" type="text/javascript"><!--var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
htmlDoc.cookie = "sessionId=3213;expires=34283028"
htmlDoc.close();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.referrer
The referrer
property of the HTMLDocument
object returns the URI of the page that linked to this page. The value is an empty string if the user navigated to the page directly (not through a link, but, for example, via a bookmark).
Listing 11.83 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
and then inspects the referrer
property to see which server the page originated from.
<html><br/><script language="JavaScript" type="text/javascript"><br/><!--<br/>var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc"); htmlDoc.open(); if(htmlDoc.referrer == "http://www.foo.bar/index.htm") cameFromFooBar = true; // --> </script> </html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.title
The title
property of the HTMLDocument
object represents the title of a document as specified by the TITLE
element in the head of the document.
Listing 11.84 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
and then changes the title.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
htmlDoc.title = "New Title for My HTML Doc";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.URL
The URL
property of the HTMLDocument
object represents the complete URI of the document.
Listing 11.85 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
and then creates a TEXTAREA
element and sets its value to be that of the URL
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textArea = htmlDoc.createElement("textarea");
textArea.value = htmlDoc.URL;
// -->
</script> </html>
JavaScript 1.5+, JScript
5+ Nav6+, IE5+
htmlDoc.write(
string)
The write()
method of the HTMLDocument
object is used to write a string to a document stream opened by open()
. The string is parsed into the document’s structure model.
Listing 11.86 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and then using the write()
method to write text data to this document.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
htmlDoc.write("<h1>Hello World</h1>");
htmlDoc.close();
// --> </html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDoc.writeln(
string)
The writeln()
method of the HTMLDocument
object is used to write a string followed by a newline character to a document stream opened by open()
. The string is parsed into the document’s structure model.
Listing 11.87 illustrates the creation of an HTMLDocument
using theHTMLDOMImplementation
object and then using the writeln()
method to write text data to this document.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
htmlDoc.writeln("<h1>Hello World</h1>");
htmlDoc.close();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+ Nav6+, IE5+
Core DOM HTML object.
The HTMLDOMImplementation
object inherits all properties and methods of theDOMImplementation
object with a method for creating an HTML document instance. The method for this object is as follows:
createHTMLDocument()
Creates an HTML Document and returns it
Listing 11.88 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textArea = htmlDoc.createElement("textarea");
textArea.Value = "Here's some text in a TEXTAREA");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlDOMImpl.createHTMLDocument(
documentTitle);
The createHTMLDocument()
method of the HTMLDOMImplementation
object creates an HTMLDocument
object with the minimal tree made of the following elements: HTML
, HEAD
, TITLE
, and BODY
.
The documentTitle
parameter names the title of the document to be set as the content of the TITLE
element, through a child Text node.
Listing 11.89 creates a new HTMLDocument
object using the createHTMLDocument()
method of HTMLDOMImplementation
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textArea = htmlDoc.createElement("textarea");
textArea.Value = "Here's some text in a TEXTAREA");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
All HTML element objects inherit from this object. The base HTMLElement
object represents elements that only expose the HTML core attributes.
These elements are as follows:
• HEAD
• special: SUB
, SUP
, SPAN
, BDO
• font: TT
, I
, B
, U
, S
, STRIKE
, BIG
, SMALL
• phrase: EM
, STRONG
, DFN
, CODE
, SAMP
, KBD
, VAR
, CITE
, ACRONYM
, ABBR
• list: DD
, DT
• NOFRAMES
, NOSCRIPT
• ADDRESS
, CENTER
Table 11.10 contains a list of properties for this object.
Listing 11.90 illustrates the creation of a BaseElement
object interrogating its id
to verify the correct type.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textAreaObj = htmlDoc.createElement("textarea");
if(textAreaObj.id != "textarea")
throw new DOMException("implementation error!");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlElemObj.className
The className
property of the HTMLElement
object is the class attribute of the element.
Listing 11.91 illustrates the creation of a TextAreaElement
object and setting itsclassName
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textAreaObj = htmlDoc.createElement("textarea");
textAreaObj.classname = "TextArea";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlElemObj.dir
The dir
property of the HTMLElement
object specifies the base direction of directionally neutral text and the directionality of tables.
Listing 11.92 illustrates the setting the dir
property of the HTMLElement
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textAreaObj = htmlDoc.createElement("textarea");
textAreaObj.dir = "right";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlElemObj.id
The id
property of the HTMLElement
object represents the element’s identifier.
Listing 11.93 illustrates the creation of a BaseElement
object interrogating its ID to verify the correct type.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textAreaObj = htmlDoc.createElement("textarea");
if(textAreaObj.id != "textarea")
throw new DOMException("implementation error!");
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlElemObj.lang
The lang
property of the HTMLElement
object represents the language code defined in RFC 1766, which can be found at http://www.ietf.org.
Listing 11.94 illustrates writing if the lang
property of the HTMLElement
object.
<html>
<script language="JavaScript" type="text/javascript"> <!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textAreaObj = htmlDoc.createElement("textarea");
textAreaObj.lang = "us/english";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlElemObj.title
The title
property of the HTMLElement
object is the element’s advisory title.
Listing 11.95 illustrates the creation of a HTMLElement
and setting its title.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var textAreaObj = htmlDoc.createElement("textarea");
texAreaObj.title = "TextArea Element";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
The HTMLFieldSetElement
organizes form controls into logical groups. This object inherits all properties and methods from the HTMLElement
object. The property for this object is as follows:
Item | Description |
| The form in which this field set element resides |
Listing 11.96 illustrates the creation of HTMLFieldSetElement
object
<html>
<script language="JavaScript" type="text/javascript">
<!--
var fieldSetObj = formObj.createElement("fieldset");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormSetObj.form
The form
property of the HTMLFieldSetElement
returns the FORM
element containing this control. Returns Null
if this control isn’t within the context of a form.
Listing 11.97 illustrates the creation of an HTMLFieldSetElement
using theHTMLFormElement
object and then checking its form
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var fieldSetObj = formObj.createElement("fieldset");
if(fieldSetObj.form.name == "emailForm")
processEmail(fieldSetObj.Form);
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML Font element. HTMLFontElement
inherits all methods and properties of HTMLElement
. Table 11.11 contains a list of properties for this object.
Listing 11.98 illustrates the creation of an HTMLFontElement
using theHTMLBodyElement
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var fontObj = bodyObj.createElement("font");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFontObj.color
The color
property of the HTMLFontElement
object represents the font color.
Listing 11.99 illustrates the creation of an HTMLFontElement
using theHTMLBodyElement
object and then setting its color
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var fontObj = bodyObj.createElement("font");
fontObj.color = "#FFFFFF";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFontObj.face
The face
property of the HTMLFontElement
object represents the font face identifier.
Listing 11.100 illustrates the creation of an HTMLFontElement
using theHTMLBodyElement
object and then setting its face
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var fontObj = bodyObj.createElement("font");
fontObj.face = "courier";
// -->
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFontObj.size
The size
property of the HTMLFontElement
object represents the font size.
Listing 11.101 illustrates the creation of an HTMLFontElement
using the HTMLBodyElement
object element and then setting its size
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var fontObj = bodyObj.createElement("font");
fontObj.size = 10;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
The FORM element encompasses behavior similar to a collection and an element. It provides direct access to the contained input elements as well as the attributes of the form element. This object inherits all methods and properties from HTMLElement
. Table 11.12 contains a list of properties and methods for this object.
Listing 11.102 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then the iteration through its elements
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
var formElements = formObj.elements;
var i = 0;
while(i < formElements.length) {
processFormElement(formElements.Index(i));
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.acceptCharset
The acceptCharset
property of the HTMLFormElement
object is a list of character sets supported by the server.
Listing 11.103 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then setting its acceptCharset
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.acceptCharset = "us/english";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.action
The action property of the HTMLFormElement object is a server-side form handler.
Listing 11.104 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then setting its action
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.action = "http://foo.bar/cgi-bin/processForm.pl";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.elements
The elements
property of the HTMLFormElement
object returns a collection of all control elements in the form.
Listing 11.105 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then the iteration through its elements
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
var formElements = formObj.elements;
var i = 0;
while(i < formElements.length) {
processFormElement(formElements.item(i));
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.enctype
The enctype
property of the HTMLFormElement
object is the content type of the submitted form, generally "application/x-www-form-urlencoded"
.
Listing 11.106 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then setting its enctype
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.enctype = "application/x-www-form-urlencoded";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.length
The length
property of the HTMLFormElement
object is the number of form controls in the form.
Listing 11.107 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then reading its length
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
var formElements = formObj.elements;
var i = 0;
while(i < formElements.length) {
processFormElement(formElements.item(i));
i++;
}
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.method
The method
property of the HTMLFormElement
object is the HTTP method used to submit form.
Listing 11.108 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then setting its method
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.method = "post";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.name
The name
property of the HTMLFormElement
object names the form.
Listing 11.109 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.name = "checkoutForm";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.reset()
The reset()
method of the HTMLFormElement
object restores a form element’s default values. It performs the same action as a reset button.
Listing 11.110 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then the invocation of its reset()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.reset();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.submit()
The submit()
method of the HTMLFormElement
object submits the form. It performs the same action as a submit button.
Listing 11.111 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then the invocation of its submit()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.submit();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFormObj.target
The target
property of the HTMLFormElement
object is the frame to render the resource in.
Listing 11.112 illustrates the creation of an HTMLFormElement
using the HTMLBodyElement
object and then setting its target
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var bodyObj = htmlDoc.createElement("body");
var formObj = bodyObj.createElement("form");
formObj.target = "MainFrame";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML frame element. It is used to create a frame. The HTMLFrameElement
inherits all properties and methods from HTMLElement
. Table 11.13 contains a list of properties for this object.
Listing 11.113 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.contentDocument
The contentDocument
property of the HTMLFrameElement
object is the document this frame contains, if there is one and it is available, or Null
otherwise.
Listing 11.114 illustrates reading the contentDocument
property of a HTMLFrameElement
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDocObj = frameObj.contentDocument;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.frameBorder
The frameBorder
property of the HTMLFrameElement
object is the request frame borders.
Listing 11.115 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its frameBorder
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.Border = 0;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.longDesc
The longDesc
property of the HTMLFrameElement
object is the URI designating a long description of this image or frame.
Listing 11.116 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its longDesc
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.longDesc = "http://foo.bar/framedesc.html";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.marginHeight
The marginHeight
property of the HTMLFrameElement
object is the frame margin height, in pixels.
Listing 11.117 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its marginHeight
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.marginHeight = 3;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.marginWidth
The marginWidth
property of the HTMLFrameElement
object is the frame margin width, in pixels.
Listing 11.118 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its marginWidth
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.marginWidth = 3;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.name
The name
property of the HTMLFrameElement
object is the frame name (object of the target attribute).
Listing 11.119 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object element and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.name = "mainframe";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.noResize
The noResize
property of the HTMLFrameElement
object forbids user from resizing frame when true.
Listing 11.120 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its noResize
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.noResize = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.scrolling
The scrolling
property of the HTMLFrameElement
object specifies whether the frame should have scrollbars.
Listing 11.121 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its scrolling
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.scrolling = false;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameObj.src
The src
property of the HTMLFrameElement
object is a URI designating the initial frame contents.
Listing 11.122 illustrates the creation of an HTMLFrameElement
using the HTMLFrameSetElement
object and then setting its src
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
var frameObj = frameset.createElement("frame");
frameObj.src = "http://foo.bar/ ";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML frameset element and is used to create a grid of frames. The HTMLFrameSetElement
object inherits all properties and methods from HTMLElement
. Table 11.14 contains a list of properties for this object.
Listing 11.123 illustrates the creation of an HTMLFrameSetElement
using the HTMLDocument
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameSetObj.cols
The cols
property of the HTMLFrameSetElement
object is the number of columns of frames in the frameset.
Listing 11.124 illustrates the creation of an HTMLFrameSetElement
using the HTMLDocument
object and then setting its cols
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
frameset.cols = 3;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlFrameSetObj.rows
The rows
property of the HTMLFrameSetElement
object is the number of rows of frames in the frameset.
Listing 11.125 illustrates the creation of an HTMLFrameSetElement
using the HTMLDocument
object element and then setting its rows
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
frameSetObj = htmlDoc.createElement("frameset");
frameset.rows = 3;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents this document’s header information. This object inherits all methods and properties from the HTMLElement
object. The property for this object is as follows:
Item | Description |
| URI specifying the metadata profile |
Listing 11.126 illustrates the creation of an HTMlHeadlElement
using the HTMLDocument
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var headElement = htmlDoc.createElement("head");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHeadElemObj.profile
The profile
property of the HTMLHeadElement
object represents the URI designating a metadata profile.
Listing 11.127 illustrates the creation of an HTMLHeadlElement
using the HTMLDocument
object element and then setting its profile
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var headElement = htmlDoc.createElement("head");
headElement.profile = "http://foo.bar/metaprofile.htm";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents HTML heading elements H1 to H6. The HTMLHeadingElement
object inherits all properties and methods from the HTMLElement
object. The property for this object is as follows:
Item | Description |
| The horizontal alignment for this heading element |
Listing 11.128 illustrates the creation of an HTMLHeadingElement
using the HTMLBodyElement
object element and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var headingObj = bodyObj.createElement("heading");
headingObj.align = "left";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHeadingingObj.align
The align
property of the HTMLHeadingElement
object is the horizontal text alignment.
Listing 11.129 illustrates the creation of an HTMLHeadingElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var headingObj = bodyObj.createElement("heading");
headingObj.align = "bottom";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML horizontal rule element. The HTMLHRElement
inherits all properties and methods from HTMLElement
. Table 11.15 contains a list of properties for this object.
Listing 11.130 illustrates the creation of an HTMLHRElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var hrObj = bodyObj.CreateElement("hr");
hrObj.align = "top";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHRObj.align
The align
property of the HTMLHRElement
object aligns the rule on the page.
Listing 11.131 illustrates the creation of an HTMLHRElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var hrObj = bodyObj.CreateElement("hr");
hrObj.align = "bottom";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHRObj.noShade
The noShade
property of the HTMLHRElement
object indicates to the user agent that there should be no shading in the rendering of this element.
Listing 11.132 illustrates the creation of an HTMLHRElement
using the HTMLBodyElement
object and then setting its noShade
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var hrObj = bodyObj.CreateElement("hr");
hrObj.noShade = true;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHRObj.size
The size
property of the HTMLHRElement
object is the height of the rule.
Listing 11.133 illustrates the creation of an HTMLHRElement
using the HTMLBodyElement
object and then setting its size
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var hrObj = bodyObj.CreateElement("hr");
hrObj.size = 10;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHRObj.width
The width
property of the HTMLHRElement
object is the width of the horizontal rule.
Listing 11.134 illustrates the creation of an HTMLHRElement
using the HTMLBodyElement
object element and then setting its width
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var hrObj = bodyObj.CreateElement("hr");
hrObj.width = 10;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents the root of an HTML document. HTMLHtmlElement
inherits all properties and methods of the HTMLElement
object. The property for this object is as follows:
Item | Description |
| Version information about this document’s DTD |
Listing 11.135 illustrates the creation of an HTMlHtmlElement
using the HTMLDocument
object element.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHtmlDocument("My HTML Doc");
htmlDoc.open();
var htmlElement = htmlDoc.createElement("html");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlHtmlElementObj.version
The version
property of the HTMLHtmlElement
represents version information about the document’s DTD.
Listing 11.136 illustrates the creation of an HTMlHtmlElement
using the HTMLDocument
object element and then setting its version
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHtmlDocument("My HTML Doc");
htmlDoc.open();
var htmlElement = htmlDoc.createElement("html");
htmlElement.version = "4.0";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML internal frame element. The HTMLIFrameElement
object inherits all properties and methods of the HTMLElement
object. Table 11.16 contains a list of properties for this object.
Listing 11.137 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.align
The align
property of the HTMLFrameElement
object aligns this object (vertically or horizontally) with respect to its surrounding text.
Listing 11.138 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.align = "top";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.contentDocument
The contentDocument
property of the HTMLIFrameElement
object represents the document this frame contains, if there is one and it is available, or Null
otherwise.
Listing 11.139 illustrates reading an HTMLIFrameElement's contentDocument
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = iFrameObj.contentDocument;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.frameBorder
The frameBorder
property of the HTMLIFrameElement
object requests the frame borders for this object.
Listing 11.140 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its frameBorder
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.frameBorder = 1;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.height
The height
property of the HTMLIFrameElement
object represents the frame height.
Listing 11.141 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its height
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.height = 25;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.longDesc
The longDesc
property of the HTMLIFrameElement
object represents the URI designating a long description of this image or frame.
Listing 11.142 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its longDesc
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.longDesc = "http://foo.bar/desc.html";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.marginHeight
The marginHeight
property of the HTMLIFrameObject
represents the frame margin height, in pixels.
Listing 11.143 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its marginHeight
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.marginHeight = 4;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.marginWidth
The marginWidth
property of the HTMLIFrameElement
represents the frame margin width, in pixels.
Listing 11.144 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its marginWidth
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.width = 33;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.name
The name
property of the HTMLIFrameElement
object represents the frame name (object of the target attribute).
Listing 11.145 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.name = "myframe";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.scrolling
The scrolling
property of the HTMLIFrameElement
object specifies whether the frame should have scrollbars.
Listing 11.146 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its scrolling
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.scrolling = false;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.src
The src
property of the HTMLIFrameElement
object represent a URI designating the initial frame contents.
Listing 11.147 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its src
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.src = "http://foo.bar/";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIFrameObj.width
The width
property of the HTMLIFrameElement
object represents the frame width.
Listing 11.148 illustrates the creation of an HTMLIFrameElement
using the HTMLBodyElement
object and then setting its width
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var iFrameObj = bodyObj.createElement("iframe");
iFrameObj.width = 100;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML image element. The HTMLImageElement
object inherits all methods and properties from the HTMLElement
object. Table 11.17 contains a list of properties for this object.
Listing 11.149 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its lowSrc
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.lowSrc = "http://foo.bar/images/lowfi.jpg";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. align
The align
property of the HTMLImageElement
object aligns this object (vertically or horizontally) with respect to its surrounding text.
Listing 11.150 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("image);
imageObj.align = "top";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. alt
The alt
property of the HTMLImageElement
object represents alternate text for user agents not rendering the normal content of this element.
Listing 11.151 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its alt
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.CreateElment("image);
imageObj.alt = "Can't support images?";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. border
The border
property of the HTMLImageElement
indicates the width of border around image.
Listing 11.152 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its border
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("image);
imageObj.border = 1;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. height
The height
property of the HTMLImageElement
object overrides the height of the image.
Listing 11.153 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object element and then setting its height
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.height = 12;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. hspace
The hspace
property of the HTMLImageElement
object indicates the horizontal space to the left and right of this image.
Listing 11.154 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its hspace
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.hspace = 12;
// -->
</script>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. isMap
The isMap
property of the HTMLImageElement
object indicates whether or not to use a server-side image map.
Listing 11.155 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its isMap
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.isMap = false;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. longDesc
The longDesc
property of the HTMLImageELement
object indicates the URI designating a long description of this image or frame.
Listing 11.156 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its longDesc
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.longDesc = "This is a long description of this image.";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. lowSrc
The lowSrc
property of the HTMLImageElement
object indicates the URI designating the source of this image for low-resolution output.
Listing 11.157 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object element and then setting its lowSrc
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.lowSrc = "http://foo.bar/images/lowfi.jpg";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. src
The src
property of the HTMLImageElement
object indicates the URI designating the source of this image.
Listing 11.158 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object element and then setting its src
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.src = "http://foo.bar/images/foo.jpg";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. useMap
The useMap
property of the HTMLImageElement
object indicates the name of the client-side image map to use.
Listing 11.159 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object element and then setting its useMap
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.useMap = "myClientMap";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. vspace
The vspace
property of the HTMLImageElement
object indicates the vertical space above and below this image.
Listing 11.160 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its vspace
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.vspace = 2;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlImageObj. width
The width
property of the HTMLImageElement
object overrides width of the image.
Listing 11.161 illustrates the creation of an HTMLImageElement
using the HTMLBodyElement
object and then setting its width
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var imageObj = bodyObj.createElement("img");
imageObj.width = 23;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents a form control used for text input.
This object inherits all methods and properties of the HTMLElement
object.
Table 11.18 contains a list of properties and methods for this object.
Listing 11.162 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. accept
The accept
property of the HTMLInputElement
object is a comma-separated list of content types that a server processing this form will handle correctly.
Listing 11.163 illustrates the accept
property of an HTMLInputElement
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
inputObj.accept = "text/html";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. accessKey
The accessKey
property of the HTMLInputElement
object is a single character access key to give access to the form control.
Listing 11.164 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object element and then setting its accessKey
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.accessKey = "A";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. align
The align
property of the HTMLInputElement
object aligns this object (vertically or horizontally) with respect to its surrounding text.
Listing 11.165 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its align
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.align = "left";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. alt
The alt
property of the HTMLInputElement
object is alternate text for user agents not rendering the normal content of this element.
Listing 11.166 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object element and then setting its alt
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.alt = "Input here!";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. blur()
The blur()
method of the HTMLInputElement
object removes keyboard focus from this element.
Listing 11.167 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then the invocation of its blur()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.blur();
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. checked
The checked
property of the HTMLInputElement
object is relevant when the type attribute of the element has the value "Radio"
or "Checkbox"
, this represents the current state of the form control, in an interactive user agent. Changes to this attribute change the state of the form control, but do not change the value of the HTML value attribute of the element.
Listing 11.168 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its checked
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.Type = "checkbox";
input.checked = false;
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. click()
The click()
method of the HTMLInputElement
object simulates a mouse click. For INPUT
elements whose type attribute has one of the following values: "Button"
, "Checkbox"
, "Radio"
, "Reset"
, or "Submit"
.
Listing 11.169 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then the invocation of its click()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "checkbox";
inputObj.click();
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. defaultChecked
The defaultChecked
property of the HTMLInputElement
object is relevant when type has the value "Radio"
or "Checkbox"
, this represents the HTML checked attribute of the element. The value of this attribute doesn’t change if the state of the corresponding form control, in an interactive user agent, changes. Changes to this attribute, however, resets the state of the form control.
Listing 11.170 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its defaultChecked
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "checkbox";
inputObj.defaultChecked = true;
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. defaultValue
The defaultValue property of the HTMLInputElement
object is relevant when the type attribute of the element has the value "Text"
, "File"
, or "Password"
, this represents the HTML value attribute of the element. The value of this attribute doesn’t change if the contents of the corresponding form control, in an interactive user agent, changes. Changing this attribute, however, resets the contents of the form control.
Listing 11.171 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its defaultValue
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
input.type = "Password";
input.defaultValue = "";
// -->
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. disabled
The disabled
property of the HTMLInputElement
object is used to disable the input object instance.
Listing 11.172 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its disabled
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.disabled = true;
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. focus()
The focus()
method of the HTMLInputElement
object gives keyboard focus to this element.
Listing 11.173 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object element and then the invocation of its focus()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.focus();
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. Form
The form
property of the HTMLInputElement
object returns the FORM element containing this control. Returns Null
if this control isn’t within the context of a form.
Listing 11.174 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then reading its form
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
if(inputObj.form.name == "emailForm")
processEmailForm(inputObj.form);
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. maxLength
The maxLength
property of the HTMLInputElement
object is the maximum number of characters for text fields, when type has the value "Text"
or "Password"
.
Listing 11.175 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its maxLength
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "text";
inputObj.maxLength = 25;
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. name
The name
property of the HTMLInputElement
object is the form control or object name when submitted with a form.
Listing 11.176 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its name
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.name = "address";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. readOnly
The readOnly
property of the HTMLInputElement
object indicates that this control is read-only. Relevant only when type has the value "Text"
or "Password"
.
Listing 11.177 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object element and then setting its readOnly
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "text";
inputObj.value = "readonly field";
inputObj.readOnly = true;
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. select()
The select()
method of the HTMLInputElement
object selects the contents of the text area. For INPUT elements whose type attribute has one of the following values: "Text"
, "File"
, or "Password"
.
Listing 11.178 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then the invocation of its select()
method.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "text";
inputObj.value = "foo bar";
inputObj.select();
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. size
The size
property of the HTMLInputElement
object indicates the size information. The precise meaning is specific to each type of field.
Listing 11.179 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its size
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "text";
inputObj.size = 25;
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. src
The src
property of the HTMLInputElement
object is relevant when the type attribute has the value "Image"
, this attribute specifies the location of the image to be used to decorate the graphical submit button.
Listing 11.180 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object element and then setting its src
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "image";
inputObj.src = "http://foo.bar/images/foo.jpg";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. tabIndex
The tabInded
property of the HTMLInputElement
object is the index that represents the element’s position in the tabbing order.
Listing 11.181 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its tabIndex
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "text";
inputObj.tabIndex = 1;
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. type
The type
property of the HTMLInputElement
object is the type of control created.
Listing 11.182 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object element and then setting its type
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "text";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. useMap
The useMap
property of the HTMLInputElement
object indicates the name of the client-side image map to use.
Listing 11.183 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its useMap
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "image";
inputObj.useMap = "mymap";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlInputObj. value
The value
property of the HTMLInputElement
object is relevant when the type attribute of the element has the value "Text"
, "File"
, or "Password"
, this represents the current contents of the corresponding form control, in an interactive user agent. Changing this attribute changes the contents of the form control, but doesn’t change the value of the HTML value attribute of the element. When the type attribute of the element has the value "Button"
, "Hidden"
, "Submit"
, "Reset"
, "Image"
, "Checkbox"
, or "Radio"
, this represents the HTML value attribute of the element.
Listing 11.184 illustrates the creation of an HTMLInputElement
using the HTMLFormElement
object and then setting its value
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var inputObj = formObj.createElement("input");
inputObj.type = "reset";
inputObj.value = "Clear form values";
// -->
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This element is used for single-line text input. HTMLIsIndexElement
inherits all methods and properties from HTMLElement
. Table 11.19 contains a list of properties for this object.
Listing 11.185 illustrates the creation of an HTMlIsIndexElement
using the HTMLDocument
object.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument("My HTML Doc");
htmlDoc.open();
var isIndexElement = htmlDoc.createElement("isindex");
}
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIsIndexObj.form
The form
property of the HTMLIsIndexElement
object returns the FORM
element containing this control. Returns Null
if this control isn’t within the context of a form.
Listing 11.186 illustrates the creation of an HTMLIsIndexElement
using the HTMLFormElement
object element and then reading its form
property.
<html>
<script language="JavaScript" type="text/javascript">
<!--
var htmlDoc = HTMLDOMImplementation.createHtmlDocument("My HTML Doc");
htmlDoc.open();
var isIndexElement =htmlDoc.createElement("isIndex");
if(isIndexElement.form == "emailForm")
processIsIndex(isIndexElement);
}
// -->
</script>
var isIndexElement = htmlDoc.createElement("isIndex");
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
htmlIsIndexObj.prompt
The prompt
property of the HTMLIsIndexElement
object is the prompt message.
Listing 11.187 illustrates the creation of an HTMlIsIndexElement
using the HTMLDocument
object element and then setting its prompt
properties.
<html>
<script language=”JavaScript”type=” text/javascript”> <
!--
var htmlDoc = HTMLDOMImplementation.createHTMLDocument(“My HTML Doc”);
htmlDoc.open();
var isIndexElement = htmlDoc.createElement(“isindex”);
isIndexElement.prompt = “prompt”;
}
</script>
</html>
JavaScript 1.5+, JScript 5+
Nav6+, IE5+
Core DOM HTML object.
This object represents an HTML form field text label. This object inherits all methods and properties of the HTMLElement
object. Table 11.20 contains a list of properties for this object.
Listing 11.188 illustrates the creation of an HTMLLabelElement
using the HTMLFormElement
object.
<html>
<script language="JavaScript" type="text/javascript"> <
!--
var labelObj = formObj.createElement("label");
// -->
</html>
18.119.235.79