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.

PreviousJavaScript DOM Content NextJavaScript DOM Styles

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"));

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"));

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"));

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>

JavaScript DOM Attributes

Example

Working with Attributes

Syntax

Changing an Attribute

Example

Attributes as Properties

Example

Checking and Removing

Example

Data Attributes

Example

Boolean Attributes

Example

Complete Example

Try It Yourself

Important Points

Conclusion