You are here: Reference > JavaScript > client-side > HTML DOM > objects > attributes

attributes collection

Browser support:
Represents a collection of attribute nodes that belong to an element.
The attributes collection contains only the specified attributes for an element in all browsers except in Internet Explorer before version 8. The attributes in the collection are sorted in source code order in Opera, Google Chrome, Safari and Internet Explorer from version 8, but not in Firefox.
In Internet Explorer before version 8, the attributes collection contains all attributes supported by the current object, except the style attribute. Furthermore, the nodeValue and value properties of an attribute object always return null for certain event attributes (e.g. onload), regardless of whether they are specified. If you need the value of an event attribute in Internet Explorer before version 8, use the getAttribute method or the corresponding inline event property.

Syntax:

Properties that reference the object:
object.attributes
The base interface, through which you can add new functionalities to the attributes collections, is the NamedNodeMap interface.

Possible members:

Properties:
length
Returns an integer that specifies the number of attributes in the current collection.

This property is read-only.
Methods:
[nameOrIndex]
Returns an attribute node from the current collection by name or index.

Parameters:

nameOrIndex
Required. A string that specifies the name or an integer that specifies the index of the attribute node to retrieve.

Return value:

If no match is found, it returns undefined, else returns the matching attribute node.
getNamedItem
Returns the attribute node with the specified name from the current attributes collection.
getNamedItemNS
9
Returns the attribute node with the specified namespace and name from the current attributes collection.
item (index)
Returns an element from the current collection by index.

Parameters:

index
Required. An integer that specifies the index of the attribute node to retrieve. In Internet Explorer, this parameter can also be a string. In that case, it specifies the name of the attribute node to retrieve.

Return value:

If no match is found, it returns null, else returns the matching attribute node.
removeNamedItem
Removes the attribute with the specified name from the current attributes collection and returns the removed attribute node.
removeNamedItemNS
9
Removes the attribute with the specified namespace and name from the current attributes collection and returns the removed attribute node.
setNamedItem
Adds the specified attribute node to the current attributes collection.
setNamedItemNS
9
Adds the specified attribute node to the current attributes collection.

Example HTML code 1:

This example illustrates the use of the attributes collection:
<head>
    <script type="text/javascript">
        function GetOnClickAttrValue (button) {
            var onclickAttr = button.attributes["onclick"];
            alert ("The value of the onclick attribute: " + onclickAttr.value);
        }
    </script>
</head>
<body>
    <button onclick="GetOnClickAttrValue (this)">Get the value of my onclick attribute!</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example iterates through the specified attributes of an element:
<head>
    <script type="text/javascript">
        function GetInfoAttrs () {
            var info = document.getElementById ("info");
            var message = "";
            for (var i = 0; i < info.attributes.length; i++) {
                var attr = info.attributes[i];
                if (attr.specified) {
                    message += attr.name + " = "  + attr.value + "<br/>";
                }
            }

            info.innerHTML = "The following attributes are specified for this element:<br />" + message;
        }
    </script>
</head>
<body onload="GetInfoAttrs ()">
    <div id="info" style="width:500px; height:300px; overflow:auto; background-color:#e0d0d0;"></div>
</body>
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content