Element | NN 6 IE n/a DOM 1 |
The W3C DOM Element object is from the Core module and represents the kind of element object you find in true XML documents. This node type inherits properties and methods from the root Node object and adds capabilities that let it act as a container of other nodes. Elements in HTML documents are of the HTMLDocument type, which inherits form the Element object. All properties and methods of the Element object are shared among all HTML element objects, as described at the beginning of this chapter. |
|
Object Model Reference | |
elementNodeReference
|
|
Object-Specific Properties | |
None. |
|
Object-Specific Methods | |
None. |
|
Object-Specific Event Handler Properties | |
None. |
addBehavior( ) | NN n/a IE 5(Win) DOM n/a |
addBehavior("URL") | |
Attaches an internal or external IE behavior to the current element. After a script attaches the behavior, the element responds to events defined for the behavior (if any), and provides access to properties and methods associated with the behavior. An external behavior file must be served from the same domain (and protocol) as the current page. For more information on applying IE/Windows behaviors, visit http://msdn.microsoft.com/workshop/author/behaviors/overview.asp. |
|
Parameters | |
|
|
Returned Value | |
Integer serial number usable as a parameter for the removeBehavior( ) method. |
all[ ] | NN n/a IE 4 DOM n/a |
Read-only | |
Returns an array of all HTML element objects contained by the current element. Items in this array are indexed (zero-based) in source code order. The collection transcends generations of nested elements such that document.all[ ] exposes every element in the entire document. See the all object for a list of this property value's own set of properties and methods. | |
As with all collections in Internet Explorer, you may use the traditional JavaScript array syntax (with square brackets around the index value) or IE's JScript alternative (with parentheses around the index value). If you are aiming for cross-browser deployment for collections that are available on both platforms, use the square brackets. | |
Unless you develop strictly for IE browsers, consider migrating to W3C DOM references via document.getElementById( ), implemented in IE 5 and later and Netscape 6. | |
Example | |
var inpVal = document.all.first_name.value; | |
Value | |
Array (collection) of element object references in HTML source code order. | |
Default | |
Current document's model. |
applyElement( ) | NN n/a IE 5(Win) DOM n/a |
applyElement(elementObject[, type]) | |
Inserts a new element as either a child element of the current object or as the new parent of the current object, depending on the value of the second parameter. The default behavior is to wrap the current object with the new element. But you may also choose to insert the new element as a child element. In this case, if the current object is in the document tree (as opposed to simply floating in memory after being created with document.createElement( )) and already has child elements nested inside it, the newly applied element is inserted in such a way that the previous children become children of the inserted element (i.e., grandchildren of the current object). This wrapping behavior is unique among IE element insertion methods and can have significant impact on the document tree. Use with caution. |
|
Parameters | |
|
|
Returned Value | |
Reference to the newly added element object. |
attachEvent( ) | NN n/a IE 5(Win) DOM n/a |
attachEvent("eventName", functionReference) | |
Binds an event handler function to an element object for a particular event type. Similar in operation to the W3C DOM addEventListener( ) method, the IE attachEvent( ) method is used primarily for IE behaviors. Binding events through element object event handler properties is a better cross-browser approach for regular HTML pages. If you bind an event handler through the attachEvent( ) method, you can disengage the binding via the detachEvent( ) method. |
|
Parameters | |
|
|
Returned Value | |
Boolean value true if the binding is successful. |
behaviorUrns[ ] | NN n/a IE 5(Win) DOM n/a |
Read-only | |
Provides an array of Uniform Resource Names for all external behaviors (.htc files) associated with the element through style sheet syntax. Perhaps for security reasons, the strings entries of this array are always empty. |
|
Example | |
var htcCount = document.getElementById(elementID).behaviorUrns.length;
|
|
Value | |
Array of (empty) strings. |
|
Default | |
Array of length 0. |
canHaveChildren | NN n/a IE 5(Win) DOM n/a |
Read-only | |
Specifies whether the current element may act as a container of other elements. The property value is based on IE for Windows built-in HTML DTDs, which define several elements (such as <br>) that may not have child nodes inserted into them. |
|
Example | |
if (elementRef.canHaveChildren) {
// statements to insert or append child elements
}
|
|
Value | |
Boolean value: true | false. |
|
Default | |
Element-specific. |
children[ ] | NN n/a IE 4 DOM n/a |
Read-only | |
Returns an array of all first-level HTML element objects contained by the current element. This collection differs from the all[ ] collection in that it contains references only to the immediate children of the current element (whereas the all[ ] collection transcends generations). For example, document.body.children[ ] might contain a form, but no reference to form elements nested inside the form. Items in this array are indexed (zero-based) in source code order. In contrast to the childNodes[ ] array, the scope of this property is the element, not the node. See the children object. | |
Example | |
for (var i = 0; i < elementRef.children.length; i++) { if (elementRef.children[i].tagName == "FORM") { // operate on a form element } } | |
Value | |
Array of element object references. | |
Default | |
Array of length zero. |
className | NN 6 IE 4 DOM 1 |
Read/Write | |
This is an identifier generally used to associate an element with a style sheet rule defined for a class selector. You can alter the class association for an element by script. If the document includes an alternate class selector and style rule, adjusting the element's className property can provide a shortcut for adjusting many style properties at once. | |
Example | |
document.getElementById("elementID").className = "altHighlighted"; | |
Value | |
Case-sensitive string. Multiple class names are space-delimited within the string. | |
Default | |
Empty string. |
clearAttributes( ) | NN n/a IE 5(Win) DOM n/a |
Removes all attributes from the current element except for the id and name attributes (if specified). Any rendering characteristics influenced by the element's attributes that are removed also no longer apply to the element. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
click( ) | NN 2 IE 4 DOM 1 |
Simulates the click action of a user on the element. Fires an onclick event in Internet Explorer 4 and later and Navigator 4 and later. Note in browsers prior to IE 4 and Netscape 6, not all elements are capable of the click( ) method (or onclick event). Also, don't expect all elements that normally change their graphical state when clicked by the user to simulate the same state change during the scripted click. For example, some Macintosh browser versions fail to change the checked state of a checkbox when a script invokes a click( ) method on the checkbox. In this case, invoke the click( ) method only if an onclick event handler executes some code; but also set the checked property of the checkbox as desired. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
getAttribute( ) | NN 6 IE 4 DOM 1 |
getAttribute(attributeName) getAttribute(attributeName[,caseSensitivity]) |
|
Returns the value of the named attribute within the current element. If the attribute is reflected in the object model as a property, this method returns the same value as when reading the object's property. This is the preferred method for reading an element object attribute (i.e., property) value under the W3C DOM. | |
The attribute name you pass as a parameter is not case-sensitive in current browsers. IE, however, provides an optional second parameter that lets you force case-sensitivity in the attribute naming. This might encourage the reuse of the same attribute name but with different case lettersan ill-advised practice. | |
See the setAttribute( ) method for assigning values to attributes and creating new attribute/value pairs. | |
Parameters | |
| |
Returned Value | |
The W3C DOM and Netscape 6 maintain attribute values exclusively as string data types. IE, however may return an attribute value as a string, number, or Boolean. |
getAttributeNode( ) | NN 6 IE 6 DOM 1 |
getAttributeNode(attributeName) | |
Returns a reference to the attribute node (Attr object) associated with the name. This type of node is the same kind that populates the array returned by an element's attributes property, but the getAttributeNode( ) method gives you direct access to the Attr node object by name. More helpful in XML documents, where an attribute can convey important data associated with the element. See the Attr object for details about that node type. |
|
Parameters | |
|
|
Returned Value | |
Reference to an Attr object. |
getAttributeNS( ) | NN 6 IE n/a DOM 2 |
getAttributeNS("namespaceURI", "localName") | |
Returns the value of the local-named attribute with a matching namespace URI within the current element. This method works like getAttribute( ) but accommodates attributes for XML documents that are labeled according to a namespace specification. The following simple XML document uses a namespace for an attribute of the libBook:title element: <?xml version="1.0" encoding="ISO-8859-1"> <results xmlns:libBook="http://catalog.umv.edu/schema"> <libBook:title libBook:rareBooks="true">De Principia</libBook:title> </results>? |
|
To retrieve the value of the libBook:rareBooks attribute, the method for the element would include the getAttributeNS( ) method call with the following parameters: getAttributeNS("http://catalog.umv.edu/schema", "rareBooks") |
|
Parameters | |
|
|
Returned Value | |
The W3C DOM and Netscape 6 maintain attribute values exclusively as string data types. |
getElementsByTagName( ) | NN 6 IE 5 DOM 1 |
getElementsByTagName("tagName") | |
Returns an array of all descendant elements of the current element whose tag name matches the parameter of the method. Elements in the array include children, grandchildren, and so on, and are in the source code order. The current element is not included in the array. If there are no matches, the array has a length of zero. |
|
Netscape 6, IE 5/Macintosh, and IE 6/Windows let you specify the quoted asterisk wildcard character as a parameter to return an array of all descendant elements, regardless of tag name. Be aware, however, that different browsers may have slight differences in their document tree structures that result in wildcard parameter array lengths that don't match each other. |
|
Parameters | |
|
|
Returned Value | |
Array of zero or more element references. |
getElementsByTagNameNS( ) | NN 6 IE n/a DOM 2 |
getElementsByTagNameNS("namespaceURI", "localName") | |
Returns an array of all descendant elements of the current element which have a local name that matches the second parameter of the method, and a namespace URI (assigned elsewhere in the document as a namespace declaration) that matches the first method parameter. Elements in the array include children, grandchildren, and so on, and are in the source code order. The current element is not included in the array. If there are no matches, the array has a length of zero. Applies primarily to XML documents. |
|
Parameters | |
|
|
Returned Value | |
Array of zero or more element references. |
hasAttribute( ) | NN 6 IE n/a DOM 1 |
hasAttribute("attributeName") | |
Returns a Boolean value true if the current element has an attribute whose name matches the method parameter. |
|
Parameters | |
|
|
Returned Value | |
Boolean value: true | false. |
hasAttributeNS( ) | NN 6 IE n/a DOM 2 |
hasAttributeNS("namespaceURI", "localName") | |
Returns a Boolean value true if the current element has an attribute with a local name that matches the method's second parameter, and a namespace URI (assigned elsewhere in the document as a namespace declaration) that matches the first method parameter. |
|
Parameters | |
|
|
Returned Value | |
Boolean value: true | false. |
hideFocus | NN n/a IE 5.5(Win) DOM n/a |
Read/Write | |
Specifies whether the browser should display a dotted focus rectangle around the element if it has focus. The element continues to be able to receive focus if it is focusable by default or has the tabindex attribute set. When this property is set to true, there is no visual clue about the focus state. |
|
Example | |
document.getElementById("elementID").hideFocus = true;
|
|
Value | |
Boolean value: true | false. |
|
Default | |
false |
id | NN 6 IE 4 DOM 1 |
Read/Write | |
Specifies a unique identifier that distinguishes this element from all the rest in the document. The value of this property is most often used to assemble references to elements, but you can loop through all elements to see if there is a match of an id value. It is generally not a good idea to change this property's value for an element already in the document tree. But if a script creates a new element object (via the document.createElement( ) method, for instance), it can assign a unique identifier to this object's id property, and then add the element to the document tree. |
|
Example | |
var headID = document.getElementsByTagName("head")[0].id; |
|
Value | |
String. |
|
Default | |
Empty string. |
innerText | NN n/a IE 4 DOM n/a |
Read/Write | |
Indicates the rendered text (but not any tags) of the current element. If you want the rendered text as well as any nested HTML tags, see innerHTML. Any changes to this property are not rendered through the HTML parser, meaning that any HTML tags you include are treated as displayable text content only. You may change this property only after the document has fully loaded. Changes to the innerText property are not reflected in the source code when you view the source in the browser. This property is not supported in many objects in the Macintosh version of IE 4. |
|
Example | |
document.getElementById("elementID").innerText = "How now brown cow?";
|
|
Value | |
String. |
|
Default | |
Empty string. |
insertAdjacentElement( ) | NN n/a IE 5(Win) DOM n/a | |||||||||
insertAdjacentElement("where", elementObjectReference) | ||||||||||
Inserts an element object into the designated position relative to the current element. Typically, the element object about to be inserted is created separately (for example, via document.createElement( )) or it may be a reference to an object already in the document tree, and the method essentially moves the object to its new location with the help of the insertAdjacentElement( ) method. |
||||||||||
The destination is governed by the first attribute, which consists of one of four values that determine where the insertion occurs, as follows. |
||||||||||
Although the effects on the document element tree are well-defined, the rendered result varies with the combination of inline and block elements you use as the current and inserted element objects. Inserting a block-level element (such as a div or p element) causes that element to render on the next line and at the left edge of the block-level positioning context (such as the body or td element). Applying the W3C DOM appendChild( ) method on elements is the equivalent of the insertAdjacentElement( ) method with the beforeEnd position parameter. |
||||||||||
|
||||||||||
Parameters | ||||||||||
|
||||||||||
Returned Value | ||||||||||
Reference to the inserted element object. |
insertAdjacentHTML( ) | NN n/a IE 4 DOM n/a |
insertAdjacentHTML("where", HTMLText) |
|
Inserts a text string into the designated position relative to the element's existing HTML. If HTML tags are part of the text to be inserted, the browser interprets the tags and performs the desired rendering. This method is not supported in many objects in the Macintosh version of IE 4. | |
Parameters | |
| |
Returned Value | |
None. |
insertAdjacentText( ) | NN n/a IE 4 DOM n/a |
insertAdjacentText("where", text) |
|
Inserts text into the designated position relative to the element's existing HTML. If HTML tags are part of the text to be inserted, the tags are shown literally on the page. This method is not supported in many objects in the Macintosh version of IE 4. | |
Parameters | |
| |
Returned Value | |
None. |
isContentEditable | NN n/a IE 5.5(Win) DOM n/a |
Read-only | |
Specifies whether the current element has IE/Windows user editing engaged. Reveals the actual editing state as either explicitly set for the element or inherited from its ancestor tree. |
|
Example | |
if (document.getElementById("elementID").isContentEditable) {
// process the editable element
}
|
|
Value | |
Boolean value: true | false. |
|
Default | |
false |
isMultiLine | NN n/a IE 5.5(Win) DOM n/a |
Read-only | |
Specifies whether the current element allows content to extend across multiple lines. Most text containers allow multiple lines, but other kinds of elements, such as a text input element are restricted to single line rendering. |
|
Example | |
if (document.getElementById("elementID").isMultiLine) {
// process the element as a potential multiple-line element
}
|
|
Value | |
Boolean value: true | false. |
|
Default | |
Element default. |
mergeAttributes( ) | NN n/a IE 5(Win) DOM n/a |
mergeAttributes(modelElementReference[, preserveIDs]) | |
Copies attribute name/value pairs from the element specified as a parameter to the current element. This is helpful for copying a large set of attributes from an existing element to a newly created element. By default, the copy does not include the id or name attributes so that the two elements maintain separate identifiers for scripting and form purposes. Starting with IE 5.5/Windows, an optional Boolean second parameter, when set to false, duplicates id and name attributes as well. |
|
Parameters | |
|
|
Returned Value | |
None. |
offsetHeight, offsetWidth | NN 6 IE 4 DOM n/a |
Read-only | |
Broadly speaking, provide the height and width of the element's content, but with minor variations with respect to element borders and padding among various operating system versions of IE and compatibility modes controlled by the DOCTYPE declaration. The trend is to include the measure of borders and padding, but not margins in these values. Implemented in Netscape 6 as a convenience, even though not part of the W3C DOM. See the Section 9.2 at the beginning of this chapter for details. | |
Example | |
var midpoint = document.getElementById("elementID").offsetWidth/2; | |
Value | |
Integer pixel count. | |
Default | |
Element-specific. |
offsetLeft, offsetTop | NN 6 IE 4 DOM n/a |
Read-only | |
Broadly speaking, provide the left and top coordinates of the element's box, but with minor variations with respect to the coordinate system context (vis--vis the offsetParent element) influenced by various operating system versions of IE and compatibility modes controlled by the DOCTYPE declaration. Implemented in Netscape 6 as a convenience, even though not part of the W3C DOM. See the Section 9.2 at the beginning of this chapter for details. For positioned elements, you should rely more on the element's style properties that control location in the document or browser viewing space. | |
Example | |
if (document.getElementById("elementID").offsetLeft <= 20 && document.getElementById("elementID").offsetTop <=40) { ... } | |
Value | |
Integer pixel count. | |
Default | |
Element-specific. |
offsetParent | NN 6 IE 4 DOM n/a |
Read-only | |
Returns a reference to the object that is the current element's offset positioning context. For most elements on an IE page and all elements in a Netscape 6 page, this is the body object. But elements in IE that are wrapped in div elements or are cells of a table have other parents. Moreover, for complex nested elements, you will find wide variations in the object returned by this property, depending on browser version. For example, the offsetParent property of a td element is the next outermost tr element in IE 4 for Windows, and the table element for later versions of IE for Windows and all versions of IE for the Macintosh. Netscape 6 still regards the body element as the offsetParent of the td element. See the Section 9.2 at the beginning of this chapter for an example of using this property to calculate the precise position of an inline element. | |
Example | |
var containerLeft = document.getElementById("elementID")offsetParent.offsetLeft; | |
Value | |
Object reference. | |
Default | |
body object. |
outerHTML | NN n/a IE 4 DOM n/a |
Read/Write | |
Indicates the rendered text and HTML tags (i.e., all source code), including the start and end tags, of the current element. If you want only the rendered text, see outerText. For the source code that excludes the current element's tags, see innerHTML. A change to this property that includes HTML tags is rendered through the HTML parser, as if the new value were part of the original source code. You may change this property only after the document has fully loaded, and, in the process, you can even change the type of element it is or replace the element with straight text content. Changes to the outerHTML property are not reflected in the source code when you view the source in the browser. To add to existing HTML, see the insertAdjacentHTML( ) method. This property is not supported in many objects in the Macintosh version of IE 4. The W3C DOM equivalent requires extensive manipulation of node-level objects, as shown in Chapter 5. | |
Example | |
document.getElementById("elementID").outerHTML =
"<acronym id="quotes">NI<i>M</i>BY</acronym>"; | |
Value | |
String that may or may not include HTML tags. | |
Default | |
Empty string. |
outerText | NN n/a IE 4 DOM n/a |
Read/Write | |
Indicates the rendered text (but not any tags) of the current element. If you want the rendered text as well as the element's HTML tags, see outerHTML. Any changes to this property are not rendered through the HTML parser, meaning that any HTML tags you include are treated as displayable text content only. You may change this property only after the document has fully loaded. Changes to the outerText property are not reflected in the source code when you view the source in the browser. This property is not supported in many objects in the Macintosh version of IE 4. | |
Example | |
document.getElementById("elementID").outerText = "UNESCO"; | |
Value | |
String. | |
Default | |
Empty string. |
parentElement | NN n/a IE 4 DOM n/a |
Read-only | |
Returns a reference to the next outermost element in the HTML containment hierarchy. An element's HTML parent is not necessarily the same as the object returned by the offsetParent property. The parentElement concerns itself strictly with source code containment, while the offsetParent property looks to the next outermost element that is used as the coordinate system for measuring the location of the current element. For example, if the main document contains a p element with an em element nested inside, the em element has two parents. The p element is the returned parentElement value (due to the HTML source code containment), while the body element is the returned offsetParent value (due to coordinate space containment). | |
You can jump multiple parent levels by cascading parentElement properties, as in: document.getElementById("elementID").parentElement.parentElement; | |
You can then use references to access a parent element's properties or methods. | |
The corresponding property for the W3C DOM is parentNode. | |
Example | |
document.getElementById("elementID").parentElement.style.fontSize = "14pt"; | |
Value | |
Element object reference. | |
Default | |
Element-specific. |
removeAttribute( ) | NN 6 IE 4 DOM 1 |
removeAttribute("attributeName") removeAttribute("attributeName"[, caseSensitivity]) | |
Removes the named attribute from the current element. An IE 4 requirement that limited attribute removal to attributes that had been added with the setAttribute( ) method is not applicable in IE 5 and later or Netscape 6. Removing an attribute does not change the source code when viewed through the browser, but does affect how the browser renders the element. The attribute value or node is also no longer available after removal. |
|
Parameters | |
|
|
Returned Value | |
In IE, Boolean true if successful; false if the attribute doesn't exist. No returned value in Netscape 6 (or W3C DOM specification). |
removeAttributeNode( ) | NN 6 IE 6 DOM 1 |
removeAttributeNode(attrObjectReference) | |
Removes the attribute from the current element indicated by the parameter reference to an existing Attr node object. This provides an alternate way to remove an attribute from an element if the script has only a reference to the Attr node object, rather than its name. Removing an attribute node does not change the source code when viewed through the browser, but does affect how the browser renders the element. The attribute value or node is no longer available after removal. |
|
Parameters | |
|
|
Returned Value | |
Reference to the removed Attr object, which is no longer part of the document tree, but may now be inserted elsewhere in the document tree. |
removeAttributeNS( ) | NN 6 IE n/a DOM 2 |
removeAttributeNS("namespaceURI", "localName") | |
Removes the local-named attribute with a matching namespace URI from the current element. This method works like removeAttribute( ) but accommodates attributes for XML documents that are labeled according to a namespace specification. The following simple XML document uses a namespace for an attribute of the libBook:title element: <?xml version="1.0" encoding="ISO-8859-1"> <results xmlns:libBook="http://catalog.umv.edu/schema"> <libBook:title libBook:rareBooks="true">De Principia</libBook:title> </results>? |
|
To remove the value of the libBook:rareBooks attribute, the method for the element would include the removeAttributeNS( ) method call with the following parameters: removeAttributeNS("http://catalog.umv.edu/schema", "rareBooks") |
|
Parameters | |
|
|
Returned Value | |
None. |
removeBehavior( ) | NN n/a IE 5(Win) DOM n/a |
removeBehavior(behaviorID) | |
Disconnects the association between the current element and a behavior that had been made earlier via the addBehavior( ) method. The parameter is the value that had been returned by the addBehavior( ) method, which you must preserve as a variable between invocation of the two methods. |
|
Parameters | |
|
|
Returned Value | |
Boolean value true if the removal is successful; otherwise false. |
scopeName, tagUrn | NN n/a IE 5(Win) DOM n/a |
Read-only | |
For custom elements employing XML namespaces, the scopeName property returns the identifier that associates the tag name with a namespace that is defined elsewhere in the document via the xmlns attribute. All plain HTML elements return a value of HTML for this property. The tagUrn property returns the URI specified for the namespace. The corresponding properties in the W3C DOM are prefix and namespaceURI. |
|
Example | |
var allTitles = document.getElementsByTagName("title"); for (var i = 0; i < allTitles.length; i++) { if (allTitles[i].scopeName == "libBook" && allTitles[i].tagUrn.indexOf("catalog.umv.edu") != -1) { // process title elements from the desired namespace here } } |
|
Value | |
Strings. |
|
Default | |
HTML for scopeName; empty string for tagUrn. |
sourceIndex | NN n/a IE 4 DOM n/a |
Read-only | |
Returns the zero-based index of the element among all elements in the document. Elements are numbered according to their source code order, with the first element given a sourceIndex of zero. |
|
Example | |
var whichElement = document.getElementById("elementID").sourceIndex;
|
|
Value | |
Positive integer or zero. |
|
Default | |
Element-specific. |
scrollIntoView( ) | NN 7 IE 4 DOM n/a |
scrollIntoView([showAtTop]) |
|
Scrolls the content holding the current element so that the element is brought into view. The default behavior is to display the element so that its top is at the top of the scroll space. But you may also align the element at the bottom of the scroll space, if you prefer. | |
Parameters | |
| |
Returned Value | |
None. |
setActive( ) | NN n/a IE 5.5(Win) DOM n/a |
Makes the current element the active element without scrolling the page to bring the active element into view. Nor does the method change focus between windows or frames if the method is invoked across window object boundaries. The element, however, receives an onfocus event when the method is invoked. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
setAttribute( ) | NN 6 IE 4 DOM 1 |
setAttribute("attributeName", value) setAttribute("attributeName", value[, caseSensitivity]) | |
Sets the value of the named attribute within the current element. If the attribute is reflected in the object model as a property, this method acts the same as assigning a value to the object's property. Even so, the W3C DOM declares the setAttribute( ) method as the preferred way to adjust an attribute value (and the getAttribute( ) method for reading the value). |
|
If the attribute does not yet exist in the element, the setAttribute( ) method adds the attribute as a name/value pair to the element (except in IE 4 through 5.5, the newly added attribute is not reported as part of the element's attributes collection). |
|
IE treats the attribute names more as object property names. Therefore, when a discrepancy exists between the attribute and corresponding property names (e.g., class versus className), IE requires the property name version. To assign a new value to the class attribute of an element for both IE and Navigator, you should branch the code to invoke the method only once per browser to avoid adding an unused className attribute to the Navigator element. For purposes of object detection, a browser that supports the W3C DOM approach returns a string value type for the element's getAttribute("class") method. |
|
Values you assign to an attribute must be all strings for Netscape 6 (the W3C DOM specification). IE allows other data types (such as Number and Boolean), but if you assign, say, a numeric value in string form, the data type gets converted so that getAttribute( ) returns the value in IE's preferred data type. In Netscape 6, all attribute values are strings. |
|
Attribute names in Netscape 6 are not case-sensitive, but you should get in the habit of using all lowercase attribute names (in the direction of XHTML). IE is case-sensitive about attribute names for this method by default. An optional third parameter lets you control whether the attribute name should be treated in a case-sensitive manner. Avoid playing case-sensitivity tricks with attribute names (two different attributes with the same spelling but different case characteristics). If you use all lowercase attribute names for all your code, you can omit the third IE parameter while staying W3C DOM compliant. |
|
Parameters | |
|
|
Returned Value | |
None. |
setAttributeNS( ) | NN 6 IE n/a DOM 2 |
setAttributeNS("namespaceURI", "qualifiedName", "value") | |
Inserts or replaces an attribute in the current element. If a match exists among the element's attributes for both the namespace URI and the qualified name passed as parameters, the new value is assigned to the existing attribute. If there is no match, the attribute is added to the element. |
|
Parameters | |
|
|
Returned Value | |
None. |
setAttributeNode( ) | NN 6 IE 6 DOM 1 |
setAttributeNode(attrObjectReference) | |
Inserts or replaces an attribute in the current element. The parameter is a reference to an Attr node object that is either created anew or references from another element in the document tree. When the setAttributeNode( ) method is invoked, the browser first looks for a match between the new attribute's name and existing attribute names. If there is a match, the new attribute replaces the original one; otherwise, the new attribute is added to the attributes of the element. Adding an attribute node does not change the source code when viewed through the browser, but may affect how the browser renders the element if the attribute affects the visual representation of the element. The value of the new attribute may be retrieved via the getAttribute( ) method. |
|
Parameters | |
|
|
Returned Value | |
Reference to a replaced Attr object (which is no longer part of the document tree) or null for an insertion. |
setAttributeNodeNS( ) | NN 6 IE n/a DOM 2 |
setAttributeNodeNS(attrObjectReference) | |
Inserts or replaces an attribute in the current element. The parameter is a reference to an Attr node object that is either created anew or references from another element in the document tree. When the setAttributeNodeNS( ) method is invoked, the browser first looks for a match between the new attribute's pairing of local name and namespace URI and existing attribute local names and namespace URIs. If there is a match, the new attribute replaces the original one; otherwise, the new attribute is added to the attributes of the element. Adding an attribute node does not change the source code when viewed through the browser, but may affect how the browser renders the element if the attribute affects the visual representation of the element. The value of the new attribute may be retrieved via the getAttributeNS( ) method. |
|
Parameters | |
|
|
Returned Value | |
Reference to a replaced Attr object (which is no longer part of the document tree) or null for an insertion. |
tagName | NN 6 IE 4 DOM 1 |
Read-only | |
Returns the name of the tag of the current element. Tag names are always returned in all uppercase letters for purposes of string comparisons, regardless of source code style or DOCTYPE declaration. |
|
Example | |
var theTag = document.getElementById("elementID").tagName;
|
|
Value | |
String. |
|
Default | |
Element-specific. |
uniqueID | NN n/a IE 5(Win) DOM n/a |
Read-only | |
Returns an identifier string that is unique among all object identifiers on the page. Used primarily to assign an ID to newly created elements when you don't mind the browser using its own naming scheme to invent the name. Most commonly used as a property of the document object, but it is accessible through any existing element object reference. The identifier is perfectly valid for use as string a parameter to methods that require an element ID. |
|
Example | |
var newElem = document.createElement("p"); newElem.id = document.uniqueID; |
|
Value | |
String. |
|
Default | |
Browser-generated. |