JavaScript DOM

JavaScript DOM Attributes

Written by Swapnil RajaPublished 24 Aug 2026

JavaScript reads and changes HTML attributes with getAttribute, setAttribute and dataset.

Attributes are the extra information written inside a tag, like src or href.

Many of them can also be reached as a plain property.

Example

javascript

document.body.innerHTML = '<a id="link" href="/about">About</a>';

const link = document.getElementById("link");

console.log(link.getAttribute("href"));

The output is /about.

Working with Attributes

getAttribute reads an attribute as a string.

setAttribute writes one, creating it if needed.

removeAttribute deletes it, and hasAttribute checks for it.

Syntax

javascript

element.getAttribute("name");
element.setAttribute("name", "value");
element.removeAttribute("name");

Attribute values are always strings.

Changing an Attribute

Setting an attribute updates the page immediately.

Example

javascript

document.body.innerHTML = '<img id="pic" src="old.jpg" alt="Old">';

const pic = document.getElementById("pic");
pic.setAttribute("alt", "New description");

console.log(pic.getAttribute("alt"));

The alt text has been replaced.

Attributes as Properties

Common attributes are also properties, which is usually shorter to write.

Note that class is className, because class is a reserved word.

Example

javascript

document.body.innerHTML = '<a id="link" href="/about" class="nav">About</a>';

const link = document.getElementById("link");

console.log(link.className);
console.log(link.id);

Properties give the same values without the method call.

Checking and Removing

hasAttribute is useful before reading one that may not exist.

Example

javascript

document.body.innerHTML = '<input id="field" disabled>';

const field = document.getElementById("field");

console.log(field.hasAttribute("disabled"));

field.removeAttribute("disabled");

console.log(field.hasAttribute("disabled"));

The output is true then false.

Data Attributes

Any attribute starting with data- is yours to use.

dataset reads them, converting dashes to camel case.

Example

javascript

document.body.innerHTML =
  '<button id="btn" data-user-id="42">Click</button>';

const btn = document.getElementById("btn");

console.log(btn.dataset.userId);

data-user-id becomes dataset.userId.

Boolean Attributes

For things like checked, the property and the attribute can disagree.

The property reflects the current state; the attribute reflects the original markup.

Example

javascript

document.body.innerHTML = '<input id="box" type="checkbox">';

const box = document.getElementById("box");
box.checked = true;

console.log(box.checked);
console.log(box.hasAttribute("checked"));

The property changed but the attribute did not, which surprises many people.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript DOM Attributes</title>
</head>
<body>

  <h1>DOM Attributes</h1>

  <a id="link" href="/old" data-section="docs">A link</a>

  <p id="out"></p>

  <script>
    const link = document.getElementById("link");

    link.setAttribute("href", "/new");

    document.getElementById("out").textContent =
      link.getAttribute("href") + " in " + link.dataset.section;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a data attribute:

Add data-level="beginner" and read it with dataset.level.

Important Points

getAttribute and setAttribute read and write attributes.
Attribute values are always strings.
Common attributes are also available as properties.
class is reached as className.
data- attributes are read through dataset in camel case.

Conclusion

Attributes carry the configuration of an element, and JavaScript can change all of it.

Data attributes are a tidy way to attach your own information to an element.

Remember that properties and attributes are related but not always the same.

PreviousJavaScript DOM Content NextJavaScript DOM Styles