attributes collection
| A A | Font size |
|
|
Share |
|
Represents a collection of attribute nodes that belong to an element.
In Firefox, Opera and Safari, the attributes collection contains only the specified attributes for an element.
The attributes in the collection are sorted in source code order in Opera and Safari, but not in Firefox.
In Internet Explorer, the attributes collection contains all attributes except the style attribute.
Note: the nodeValue and value properties of an attribute object always return null for certain event attributes (e.g. onload) in Internet Explorer, regardless of whether they are specified.
If you need the value of an event attribute in Internet Explorer, use the getAttribute method.
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> 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> 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:
| Share: | Digg | Del.icio.us | Diigo |
|
User Contributed Comments
