Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Working with Element Attributes in the DOM | DOM Manipulation for Interactive Web Development
Advanced JavaScript Mastery

book
Working with Element Attributes in the DOM

Attributes are values added to HTML elements to provide additional information or modify their behavior. JavaScript provides several methods to work with these attributes, allowing you to dynamically get, set, remove, or check for specific attributes.

GetAttribute()

getAttribute() is used to retrieve the value of a specified attribute from an element. It's useful when you need to access specific attribute values like href, src, class, etc.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<a id="link" href="https://example.com">Visit Example</a>
<p id="output"></p>
<script src="index.js"></script>
</body>
</html>

Accesses the value of the href attribute of the anchor (<a>) element.

SetAttribute()

setAttribute() is used to add a new attribute or change the value of an existing attribute on an element.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<img id="logo" src="https://picsum.photos/200" alt="Company Logo" />
<script src="index.js"></script>
</body>
</html>

Sets or updates the alt attribute of the image, allowing for dynamic changes based on user actions or application logic.

RemoveAttribute()

removeAttribute() removes a specified attribute from an element, making it useful for conditionally toggling attributes based on certain events or states.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button id="submit-btn" disabled>Submit</button>
<script src="index.js"></script>
</body>
</html>

Removes the disabled attribute, enabling the button for interaction.

HasAttribute()

hasAttribute() checks whether an element has a specified attribute. This method is particularly useful for conditional logic, ensuring that certain attributes exist before performing further actions.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<input id="email-input" type="email" required />
<script src="index.js"></script>
</body>
</html>

Checks if the required attribute exists on the input field and logs a message accordingly.

Differences Between Properties and Attributes

While properties and attributes are often used interchangeably, they serve different roles in the DOM. Let's inspect their differences.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<input id="input-field" value="Initial Value" />
<script src="index.js"></script>
</body>
</html>
  • The value attribute retains the original value defined in the HTML;
  • The value property reflects the current, dynamically updated state of the input.

Practical Example: Managing Product Details on an E-commerce Site

Imagine you have a product details section where users can update product information such as availability, featured status, and shipping options. This example demonstrates how attributes are used to dynamically control these aspects.

html

index.html

css

index.css

js

index.js

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="product-details">
<h2 id="product-name">Sample Product</h2>
<p id="availability-status">
Availability: <span id="availability">In Stock</span>
</p>
<button id="toggle-availability">Toggle Availability</button>
<label>
<input type="checkbox" id="featured-checkbox" checked />
Featured Product
</label>
<button id="update-featured">Update Featured Status</button>
<p id="shipping-info">Standard Shipping: <span>Available</span></p>
<button id="remove-shipping">Remove Shipping Info</button>
</div>
<script src="index.js"></script>
</body>
</html>

The setAttribute() method is used to dynamically add specific attributes to elements based on user actions. For instance, when the availability status is toggled to "Out of Stock," setAttribute() adds an out-of-stock class to apply unique styling. Similarly, it adds a data-featured attribute to the featured checkbox when the product is marked as featured.

The removeAttribute() method removes these attributes when they are no longer needed. For example, it removes the out-of-stock class when toggling back to "In Stock" and removes the data-featured attribute if the product is no longer marked as featured. Additionally, it uses removeAttribute() to toggle the visibility of the shipping information by adding or removing the hidden attribute.

Lastly, hasAttribute() checks for the presence of these attributes, such as verifying if the data-featured attribute exists before updating the featured status or checking the hidden attribute on shipping info to determine its visibility state.

1. Which method is used to retrieve the value of an attribute from an element?

2. What does the setAttribute() method do?

3. What will the following code output?

question mark

Which method is used to retrieve the value of an attribute from an element?

Select the correct answer

question mark

What does the setAttribute() method do?

Select the correct answer

question mark

What will the following code output?

// HTML:
<button id="submit-btn" disabled>Submit</button>

// JS:
const button = document.getElementById('submit-btn');
button.removeAttribute('disabled');
console.log(button.hasAttribute('disabled'));

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 7
We use cookies to make your experience better!
some-alt