Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Managing Attributes

HTML elements have attributes (like id, class, src).

Using the DOM, JavaScript can get, set, check, or remove these attributes dynamically.

🔹 1. getAttribute()

👉 Reads the value of an attribute.

Syntax

element.getAttribute(attributeName);

Example

<input id="username" type="text">
const input = document.getElementById("username");
console.log(input.getAttribute("type"));
text

🔹 2. setAttribute()

👉 Adds or updates an attribute.

Syntax

element.setAttribute(name, value);

Example

input.setAttribute("placeholder", "Enter username");

Result in HTML

<input id="username" type="text" placeholder="Enter username">

🔹 3. removeAttribute()

👉 Removes an attribute from an element.

Syntax

element.removeAttribute(name);

Example

input.removeAttribute("placeholder");

Result

The placeholder attribute is removed.

🔹 4. hasAttribute()

👉 Checks if an attribute exists.

Syntax

element.hasAttribute(name);

Example

console.log(input.hasAttribute("id"));
console.log(input.hasAttribute("class"));
true
false

🔹 Attribute vs Property (Quick Tip)

  • Attribute → Defined in HTML

  • Property → Exists on DOM object

Example

input.value = "Bhaskar";
console.log(input.getAttribute("value"));
null

✔️ value is a property, not an HTML attribute.

✅ Summary Table

Method

Purpose

getAttribute()

Read attribute value

setAttribute()

Add or update attribute

removeAttribute()

Remove attribute

hasAttribute()

Check attribute exists

📌 Key Note:

Use properties for dynamic values (value, checked),

use attributes for static HTML-related data (id, class, src).