attributes collection
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 |
Related objects:
Related HTML objects:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, bgsound, big, blink, blockquote, body, br, button, caption, center, cite, code, col, colgroup, comment, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:hidden, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, link, listing, map, marquee, menu, meta, nobr, noframes, noscript, object, ol, optgroup, option, p, param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, xml, xmp
|
The base interface, through which you can add new functionalities to the attributes collections, is the NamedNodeMap interface.
Possible members:
Properties:
|
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:
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 |
|
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:
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 |
|
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 |
|
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?
|
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?
|
External links:
User Contributed Comments