Element: getAttribute() method

The getAttribute() method of the {{domxref("Element")}} interface returns the value of a specified attribute on the element.

If the given attribute does not exist, the value returned will be null.

If you need to inspect the {{domxref("Attr")}} node's properties, you can use the {{domxref("Element.getAttributeNode()", "getAttributeNode()")}} method instead.

Syntax

js-nolint

getAttribute(attributeName)

Parameters

attributeName
- : The name of the attribute whose value you want to get.

Return value

A string containing the value of attributeName if the attribute exists, otherwise null.

Examples

html

<!-- example div in an HTML DOC -->
<div id="div1">Hi Champ!</div>

const div1 = document.getElementById("div1");
// <div id="div1">Hi Champ!</div>

const exampleAttr = div1.getAttribute("id");
// "div1"

const lang = div1.getAttribute("lang");
// null

Description

Lower casing

When called on an HTML element in a DOM flagged as an HTML document, getAttribute() lower-cases its argument before proceeding.

Retrieving nonce values

For security reasons, CSP nonces from non-script sources, such as CSS selectors, and .getAttribute("nonce") calls are hidden.

let nonce = script.getAttribute("nonce");
// returns empty string

Instead of retrieving the nonce from the content attribute, use the {{domxref("HTMLElement/nonce", "nonce")}} property:

let nonce = script.nonce;