The attributes Property

The attributes property is a very useful one; it returns a collectionthat is, an arrayof the attributes of an element. You can see the support for the attributes property in Table 5.6.

Table 5.6. The attributes Property

Property	NS2	NS6	IE5	IE5.5	IE6
`attributes`		x	x	x	x
	Read-only
	Type: Object array

This property returns an array of attribute objects; you can see the properties of attribute objects in Table 5.7.

Table 5.7. The attribute Object Properties

Property	IE6	NS6	Means
`attributes`		x	Contained (nested) attributes
`childNodes`		x	Array of child nodes
`expando`	x		Indicates whether variables can be created within the object
`firstChild`	x	x	First child node
`lastChild`	x	x	Last child node
`localName`		x	Local name (not qualified with the namespace, if there is one)
`name`	x	x	Name of the attribute
`nameSpaceURI`		x	XML namespace Uniform Resource Identifier (URI)
`nextSibling`	x	x	Next sibling node
`NodeName`	x	x	Name of the attribute
`NodeType`	x	x	Node type, set to 2
`NodeValue`	x	x	Value of the attribute
`ownerDocument`	x	x	Object reference to the current document
`ownerElement`		x	Object reference to the containing element
`parentNode`	x	x	Object reference to the attribute's parent
`prefix`		x	Prefix of the namespace, if there is one
`previousSibling`	x	x	Previous sibling node
`specified`	x	x	True if the attribute is explicitly listed, false if it's implicit
`value`	x	x	Value of the attribute

Here's an example; in this case, I'll take a look at the value of the onclick attribute's value in a button element:

(Listing 05-03.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the attributes Property</TITLE>      </HEAD>      <BODY>          <H1>Using the attributes Property</H1>          <FORM NAME="form1">              <INPUT TYPE="BUTTON" ID="button1" ONCLICK="alert('Hello!')" VALUE="Click  Me!">              <INPUT TYPE="TEXT" ID="text1" VALUE="Click Me!">          </FORM>          <SCRIPT LANGUAGE="JavaScript">              <!--  document.write(document.form1.button1.attributes["onclick"].name +   " = " +   document.form1.button1.attributes["onclick"].value)  // -->          </SCRIPT>      </BODY>  </HTML>

You can see the results in Figure 5.2.

Figure 5.2. Looking at an attribute in the Netscape Navigator.

graphics/05fig02.gif