To get the attribute values from a DOM element, you can use the getAttribute() element method in JavaScript.

Let's say you have an h1 html tag with custom attribute data-color like this,

<h1 data-color="red">Heading</h1>

Here, you can get the value of the data-color attribute in the h1 tag using the getAttribute() like this,

// first get the reference to h1 element
const h1 = document.querySelector("h1");

// get the data-color sttribute value
// using the getAttribute() method
const value = h1.getAttribute("data-color");

console.log(value); // red

• The method accepts a valid attribute name as an argument.
• The method returns the corresponding value for the attribute as a string if supplied a valid attribute name and null if not.

See live example in JSBin.

Feel free to share if you found this useful 😃.