Working with Attributes on DOM Elements

Manipulating DOM element attributes can be tricky. This article explores various methods for setting and retrieving attribute values in JavaScript, assuming el is a DOM element (e.g., obtained via document.querySelector).

Some attributes are directly accessible as properties of the DOM object. For instance, id, title, lang, align, and event attributes like onclick can be set and retrieved simply:

el.id; // "cool"
el.title = "my title";
el.title; // "my title";

The style attribute is similar, but its properties are nested:

el.style.color = "red";
el.style.backgroundColor = "black";

To get computed styles (rather than just the inline styles), use window.getComputedStyle:

let style = window.getComputedStyle(el);
style.color; // computed CSS color

However, not all attributes are first-class citizens. For attributes like aria-hidden, you must use setAttribute and getAttribute:

el.setAttribute("aria-hidden", true);
el.getAttribute("aria-hidden");

Certain attributes offer specialized helper APIs. classList provides convenient methods for managing class attributes:

el.classList.value; // "module big"
el.classList.length; // 2
el.classList.add("cool"); // "module big cool"
el.classList.remove("big"); // "module cool"
el.classList.toggle("big"); // toggles "big"
el.classList.contains("module"); // true

classList even behaves array-like, allowing methods like forEach.

For data-* attributes, the dataset property offers a more user-friendly interface:

el.dataset;
/*
{
  active: "true",
  placement: "top right"
}
*/

el.dataset.active; // "true"
el.dataset.extraWords; // "hi" (note camelCase conversion)
el.dataset.active = "false"; // setter

This overview demonstrates the diverse ways to interact with DOM attributes, highlighting the importance of understanding the nuances of each approach for efficient and correct manipulation.

The above is the detailed content of Working with Attributes on DOM Elements. For more information, please follow other related articles on the PHP Chinese website!