Skip to main content

JavaScript DOM Attributes

Introduction​

When working with the Document Object Model (DOM) in JavaScript, one of the most common tasks is manipulating element attributes. Attributes are the additional information provided to HTML elements, such as id, class, src, href, and others that define how elements behave and appear.

In this tutorial, we'll explore how JavaScript allows you to:

  • Access existing attributes
  • Modify attribute values
  • Add new attributes
  • Remove attributes
  • Work with special attributes like classes and styles

Understanding how to manipulate attributes gives you tremendous control over your web pages, allowing you to create dynamic and interactive user experiences.

Accessing Element Attributes​

There are several ways to access an element's attributes in JavaScript:

Method 1: Using getAttribute()​

The getAttribute() method retrieves the value of a specified attribute from an element.

javascript
// HTML: <img id="myImage" src="image.jpg" alt="My Image">

const imgElement = document.getElementById("myImage");
const imgSrc = imgElement.getAttribute("src");
const imgAlt = imgElement.getAttribute("alt");

console.log(imgSrc); // Output: "image.jpg"
console.log(imgAlt); // Output: "My Image"

Method 2: Direct Property Access​

For many standard attributes, you can access them directly as properties of the element object:

javascript
const imgElement = document.getElementById("myImage");
const imgSrc = imgElement.src;
const imgAlt = imgElement.alt;

console.log(imgSrc); // Output: full URL of image.jpg
console.log(imgAlt); // Output: "My Image"
note

Direct property access often returns the full resolved URL for attributes like src and href, while getAttribute() returns the exact value as written in the HTML.

Modifying Element Attributes​

There are also multiple ways to change an element's attributes:

Method 1: Using setAttribute()​

The setAttribute() method changes the value of an attribute on the specified element.

javascript
const imgElement = document.getElementById("myImage");

// Change the src attribute
imgElement.setAttribute("src", "new-image.jpg");

// Change the alt attribute
imgElement.setAttribute("alt", "New Image Description");

// Add a title attribute
imgElement.setAttribute("title", "My Image Title");

Method 2: Direct Property Assignment​

For standard attributes, you can directly assign new values:

javascript
const imgElement = document.getElementById("myImage");

imgElement.src = "new-image.jpg";
imgElement.alt = "New Image Description";
imgElement.title = "My Image Title";

Checking if an Attribute Exists​

Before working with an attribute, you might want to check if it exists:

javascript
const button = document.getElementById("myButton");

if (button.hasAttribute("disabled")) {
  console.log("Button is disabled");
} else {
  console.log("Button is enabled");
}

Removing Attributes​

To remove an attribute completely from an element:

javascript
const imgElement = document.getElementById("myImage");

// Remove the alt attribute
imgElement.removeAttribute("alt");

// Check if the attribute was removed
console.log(imgElement.hasAttribute("alt")); // Output: false

Working with Boolean Attributes​

Some attributes like disabled, checked, and readonly are boolean attributes - their presence indicates they are "true", regardless of their value.

javascript
const checkbox = document.getElementById("myCheckbox");

// Check if checkbox is checked
console.log(checkbox.checked); // true or false

// Make checkbox checked
checkbox.checked = true;

// Alternative way
checkbox.setAttribute("checked", ""); // The value doesn't matter - the presence of the attribute does

Working with Classes​

Classes are special attributes that are frequently manipulated in JavaScript. While you can use the standard attribute methods, the classList property provides more convenient ways to handle classes:

javascript
const div = document.getElementById("myDiv");

// Add a class
div.classList.add("highlight");

// Remove a class
div.classList.remove("old-class");

// Toggle a class (adds if absent, removes if present)
div.classList.toggle("active");

// Check if element has a class
if (div.classList.contains("highlight")) {
  console.log("Element has highlight class");
}

// Replace one class with another
div.classList.replace("old-class", "new-class");

The older approach using className is still available but less flexible:

javascript
// Get all classes as a space-separated string
console.log(div.className); // "class1 class2 class3"

// Set classes (replaces ALL existing classes)
div.className = "new-class another-class";

Working with Styles​

Element styles can be accessed and modified through the style property:

javascript
const div = document.getElementById("myDiv");

// Set individual style properties
div.style.color = "blue";
div.style.backgroundColor = "yellow";
div.style.padding = "10px";

// Read a specific style property
console.log(div.style.color); // "blue"
note

The style property only accesses inline styles (set directly on the element). It doesn't access styles from CSS stylesheets. For that, you'd need getComputedStyle().

To get all applied styles, including from stylesheets:

javascript
const div = document.getElementById("myDiv");
const computedStyle = window.getComputedStyle(div);

console.log(computedStyle.color);
console.log(computedStyle.backgroundColor);

Custom Data Attributes​

HTML5 introduced custom data attributes that start with data-. They're perfect for storing extra information on elements:

html
<div id="user" data-id="123" data-username="johndoe" data-role="admin">John Doe</div>

Access them using the dataset property:

javascript
const user = document.getElementById("user");

// Read values
console.log(user.dataset.id); // "123"
console.log(user.dataset.username); // "johndoe"
console.log(user.dataset.role); // "admin"

// Set values
user.dataset.status = "active";
user.dataset.lastLogin = "2023-08-15";

// HTML now includes: data-status="active" data-last-login="2023-08-15"

Notice how multi-word attributes with hyphens (data-last-login) are accessed using camelCase (lastLogin) in the dataset object.

Real-World Example: Dynamic Form Validation​

Let's create a practical example where we use attribute manipulation for form validation:

javascript
function validateForm() {
  const emailInput = document.getElementById("email");
  const passwordInput = document.getElementById("password");
  const submitButton = document.getElementById("submitBtn");
  const errorMsg = document.getElementById("errorMsg");
  
  // Get input values
  const email = emailInput.value;
  const password = passwordInput.value;
  
  // Validate email format using a simple regex
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (!emailPattern.test(email)) {
    // Set error attributes
    emailInput.setAttribute("aria-invalid", "true");
    emailInput.classList.add("error-input");
    errorMsg.textContent = "Please enter a valid email address";
    errorMsg.removeAttribute("hidden");
    
    // Disable submit button
    submitButton.setAttribute("disabled", "");
    return false;
  } 
  
  if (password.length < 8) {
    // Set error attributes
    passwordInput.setAttribute("aria-invalid", "true");
    passwordInput.classList.add("error-input");
    errorMsg.textContent = "Password must be at least 8 characters";
    errorMsg.removeAttribute("hidden");
    
    // Disable submit button
    submitButton.setAttribute("disabled", "");
    return false;
  }
  
  // Clear any errors
  emailInput.removeAttribute("aria-invalid");
  passwordInput.removeAttribute("aria-invalid");
  emailInput.classList.remove("error-input");
  passwordInput.classList.remove("error-input");
  errorMsg.setAttribute("hidden", "");
  
  // Enable submit button
  submitButton.removeAttribute("disabled");
  return true;
}

// Add event listeners to inputs
document.getElementById("email").addEventListener("input", validateForm);
document.getElementById("password").addEventListener("input", validateForm);

This example shows:

  • Setting and removing accessibility attributes (aria-invalid)
  • Adding and removing class attributes for styling
  • Enabling/disabling the submit button by modifying its disabled attribute
  • Showing/hiding error messages using the hidden attribute

Here's another example that uses data attributes to create a simple image gallery:

html
<div class="gallery">
  <img src="thumbnail1.jpg" data-full="image1.jpg" data-caption="Beautiful sunset" class="thumbnail">
  <img src="thumbnail2.jpg" data-full="image2.jpg" data-caption="Mountain landscape" class="thumbnail">
  <img src="thumbnail3.jpg" data-full="image3.jpg" data-caption="Ocean view" class="thumbnail">
</div>

<div class="lightbox" id="lightbox" hidden>
  <img id="fullImage" src="">
  <p id="caption"></p>
  <button id="closeBtn">Close</button>
</div>
javascript
// Get all thumbnails
const thumbnails = document.querySelectorAll('.thumbnail');
const lightbox = document.getElementById('lightbox');
const fullImage = document.getElementById('fullImage');
const caption = document.getElementById('caption');
const closeBtn = document.getElementById('closeBtn');

// Add click handler to each thumbnail
thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener('click', function() {
    // Get data from attributes
    const fullImageSrc = this.getAttribute('data-full');
    const imageCaption = this.dataset.caption;
    
    // Update the lightbox
    fullImage.setAttribute('src', fullImageSrc);
    caption.textContent = imageCaption;
    
    // Show lightbox
    lightbox.removeAttribute('hidden');
  });
});

// Close lightbox when close button is clicked
closeBtn.addEventListener('click', function() {
  lightbox.setAttribute('hidden', '');
});

This example demonstrates:

  • Using data attributes to store related information
  • Accessing data attributes through getAttribute and dataset
  • Setting attributes dynamically to update content
  • Using the hidden attribute to show/hide elements

Summary​

In this tutorial, we've covered:

  1. Accessing attributes using getAttribute() and direct property access
  2. Modifying attributes using setAttribute() and direct property assignment
  3. Checking if attributes exist with hasAttribute()
  4. Removing attributes with removeAttribute()
  5. Working with boolean attributes like checked, disabled, etc.
  6. Managing classes using classList methods
  7. Manipulating styles through the style property and getComputedStyle()
  8. Using custom data attributes with the dataset property
  9. Practical examples of attribute manipulation for validation and gallery functionality

Mastering DOM attribute manipulation is essential for creating dynamic web applications. These techniques allow you to update your page's content, appearance, and behavior without having to reload the entire page, creating a smoother user experience.

Exercises​

To practice what you've learned, try these exercises:

  1. Create a toggle button that changes its text between "Show" and "Hide" when clicked, while also showing/hiding a paragraph element.
  2. Create a simple theme switcher that toggles between light and dark themes by changing CSS classes on the body element.
  3. Build a form that validates input fields as the user types and displays appropriate error messages.
  4. Create a tabbed interface where clicking on different tabs shows different content sections by manipulating the "hidden" attribute.

Additional Resources​


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)