attributes (W3C DOM Core property)

Spec
Version Depr. Static Read-only
DOM1 No No Yes
Browser support (more…)
IE5.5+ FF1.5+ SA1.3+ OP9+
Buggy Buggy Buggy Buggy

Example

var attr = node.attributes['id'];

In the example above, if node has an effective id attribute, the attr variable will be a reference to that Attr node; otherwise it will be undefined.

So if we say that node is actually an HTML img element, like this:

<img src="grin.gif" alt="(grin)" />

Then the attributes collection will have members called src and alt.

Description

The attributes collection is an unordered list of all the effective attributes1 of an Element; for other nodes this property is null.

This collection is a NamedNodeMap, primarily intended to be accessed by name. It's also possible to access the items by their index in the map, however the DOM does not specify what order they will appear in (and this varies by browser, as noted in the Compatibility notes below).

As with all named node maps, attributes is a live collection, which means that changes to the collection it represents are immediately reflected in the node map (as opposed to it being a static snapshot).

This collection is read-only.

Note: A collection is not an array

Even though a collection looks like an array, it isn't an array — although you can iterate through it and refer to its members like an array, you can't use Array methods like push or pop on it.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.5 2.0 3.0 1.3 2.0 3.0 9.0 9.5
Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy
Tip: This collection is a mess in all browsers - do not use it

Cross-browser variations in how this collection is implemented make it very unreliable. Avoid using it.

For the most part, Opera and Safari order this collection in source order, Firefox in reverse source order, and Internet Explorer in no discernible order. However these patterns are not completely consistent, and should not be relied upon (for example, when new attributes are created they're added to the end of the collection, irrespective of their source position).

In Firefox, Safari and Opera 9.5 this collection only includes explicitly defined attributes, it doesn't include attributes that have a specific default value for this document type, such as the shape attribute of an a element.

In Safari 1.3 and 2 the members of this collection cannot be accessed by name, only by index. (However the getNamedItem method works correctly.)

In Opera 9.0 in HTML mode2 the nodeName property of the members of this collection are sometimes returned in uppercase; a consistent pattern for when this does/doesn't occur could not be established absolutely, but it appears to be related to whether that attribute has already been referred to in lower case (in which case its name is returned in lowercase, otherwise uppercase).

Internet Explorer retrieving the href attribute of an a element returns a fully-qualified URI, rather than the literal attribute value. (For a link element it correctly returns the literal value.) IE also returns a qualified URI for the src attribute of an img element.

Still in Internet Explorer in HTML, this collection is also implemented such that it can be called as a function; so both of these statements are equivalent:

node.attributes['id'];
node.attributes('id');

In Internet Explorer 6 and 7 in HTML this collection contains a lot more data than just effective attributes — in fact, it contains every attribute the element could possibly have! Attributes which are not defined have an empty string value, unless they're event-handling attributes (such as onclick), in which case they have the value "null" (please note: this is the string value "null", not null). However the style attribute always returns the value null, even when it has an explicit value. Furthermore, some attribute names are indexed with the camel-cased name they use for their DOM property equivalent, for example tabIndex and accessKey (see Attr for more details).

In Internet Explorer 5.5 in HTML, referring by name to members of this collection that don't exist but are known (for example, they have a default empty value in this document type) return null (rather than an object with an empty value, as with IE6). Furthermore, when data is returned it will be the nodeValue of the attributes, not the attribute nodes themselves (ie. it returns a collection of values, not a collection of nodes). However its attribute values retrieve through this collection do expose the specified property, and inherit the nodeName and nodeValue properties of Node.

However in Internet Explorer in XML none of this is the case — in that environment Internet Explorer only includes specified attributes, cannot retrieve them from this collection by name (only by index; however the getNamedItem method works correctly), and cannot use attributes as a function.

Footnotes

1 An effective attribute is one that either has an explicit value defined by the author, or a specific default value defined in this document type. See Attr for details.

2 On XHTML or HTML pages served as text/html.

User-contributed notes

There are no comments yet.

Related Products