Latest web development tutorials
 

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)

Note 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