The HTML DOM Attribute Object
HTML DOM Nodes
In the HTML DOM (Document Object Model), everything is a node:
- The document itself is a document node
- All HTML elements are element nodes
- All HTML attributes are attribute nodes
- Text inside HTML elements are text nodes
- Comments are comment nodes
The Attr Object
In the HTML DOM, the Attr object represents an HTML attribute.
An HTML attribute always belongs to an HTML element.
The NamedNodeMap Object
In the HTML DOM, the NamedNodeMap object represents an unordered collection of an elements attribute nodes.
Nodes in a NamedNodeMap can be accessed by name or by index (number).
Browser Support
| Object | |||||
|---|---|---|---|---|---|
| Attr | Yes | Yes | Yes | Yes | Yes |
| NamedNodeMap | Yes | Yes | Yes | Yes | Yes |
The Attr Object and the NamedNodeMap Object is supported in all major browsers.
Properties and Methods
| Property / Method | Description |
|---|---|
| attr.isId | Returns true if the attribute is of type Id, otherwise it returns false |
| attr.name | Returns the name of an attribute |
| attr.value | Sets or returns the value of the attribute |
| attr.specified | Returns true if the attribute has been specified, otherwise it returns false |
| nodemap.getNamedItem() | Returns a specified attribute node from a NamedNodeMap |
| nodemap.item() | Returns the attribute node at a specified index in a NamedNodeMap |
| nodemap.length | Returns the number of attribute nodes in a NamedNodeMap |
| nodemap.removeNamedItem() | Removes a specified attribute node |
| nodemap.setNamedItem() | Sets the specified attribute node (by name) |
DOM 4 Warning !!!
In the W3C DOM Core, the Attr (attribute) object inherits all properties and methods from the Node object.
In DOM 4, the Attr object no longer inherits from Node.
For future code quality, you should avoid using node object properties and methods on attribute objects:
| Property / Method | Reason for avoiding |
|---|---|
| attr.appendChild() | Attributes don't have child nodes |
| attr.attributes | Attributes don't have attributes |
| attr.baseURI | use document.baseURI instead |
| attr.childNodes | Attributes don't have child nodes |
| attr.cloneNode() | Get or set the attr.value instead |
| attr.firstChild | Attributes don't have child nodes |
| attr.hasAttributes() | Attributes don't have attributes |
| attr.hasChildNodes | Attributes don't have child nodes |
| attr.insertBefore() | Attributes don't have child nodes |
| attr.isEqualNode() | Makes no sense |
| attr.isSameNode() | Makes no sense |
| attr.isSupported() | Is always true |
| attr.lastChild | Attributes don't have child nodes |
| attr.nextSibling | Attributes don't have siblings |
| attr.nodeName | Use attr.name instead |
| attr.nodeType | This is always 2 (ATTRIBUTE_NODE) |
| attr.nodeValue | Use attr.value instead |
| attr.normalize() | Attributes cannot be normalized |
| attr.ownerDocument | This is always your HTML document |
| attr.ownerElement | This is the HTML element you used to access the attribute |
| attr.parentNode | This is the HTML element you used to access the attribute |
| attr.previousSibling | Attributes don't have siblings |
| attr.removeChild | Attributes don't have child nodes |
| attr.replaceChild | Attributes don't have child nodes |
| attr.textContent | Use attr.value instead |
