DOM: Get Node Attribute Value
node.getAttribute(attribute_name)-
Return a node/element's attribute value. If the attribute doesn't exist, returns
null. (browsers before 2010 may return empty string"").
nodeis a HTML element or XML node.
attribute_nameshould be a string. Example:"class","id", etc.
// get first link const xx = document.getElementsByTagName("a")[0]; xx.getAttribute("href");
As of , this works in all major browsers.
Using Properties for Standard Attributes
For HTML elements (not XML), usually there's a corresponding property for standard attributes.
Example:
x = element.idx = element.classx = link_element.hrefx = img_element.width
This
x.getAttribute("href")
is same as
x.href
When to use getAttribute or setAttribute instead of element properties?
If you work with XML, such as scripting SVG, or has non-standard attribute such as HTML5 Custom Data Attribute.
example:
SVG has attribute stroke that does not have a DOM property.
[see Practical SVG Tutorial]
Example of creating a non-standard attribute:
x.setAttribute("data-user-name","John")
Class Attribute
When working with the attribute class, there are more convenient methods.
See: DOM: List/Add/Remove Class Attribute