The DOM is just a little weird about some things, and the way you deal with attributes is no exception. There are a number of ways to deal with the attributes on elements. By attributes, I mean things like the id in
. Sometimes you need to set them. Sometimes you need to get them. Sometimes there are fancy helper APIs. Sometimes there isn’t.
For this article, I’ll assume el is a DOM element in your JavaScript. Let’s say you’ve done something like const el = document.querySelector(#cool); and matched
Some attributes are also attributes of the DOM object itself, so iff you need to set an id or title, you can do:
el.id; // cool
el.title = my title;
el.title; // my title;
Others that work like that are lang, align, and all the big events, like onclick.
Then there are attributes that work similarly to that but are nested deeper. The style attribute is like that. If you log el.style you’ll see a ton of CSS style declarations. You can get and set them easily:
el.style.color = red;
module.style.backgroundColor = black;
You can get computed colors this way too. If you do module.style.color hoping to get the color of an element out of the gate, you probably won’t get it. For that, you’d have to do:
let style = window.getComputedStyle(el);
style.color; // whatever in CSS won out
But not all attributes are like first-class attributes like that.
el[aria-hidden] = true; // nope
That “works” in that it sets that as a property, but it doesn’t set it in the DOM the proper way. Instead, you’ll have to use the generic setter and getter functions that work for all attributes, like:
el.setAttribute(aria-hidden, true);
el.getAttribute(aria-hidden);
Some attributes have fancy helpers. The most fancy is classList for class attributes. On an element like:
You’d have:
el.classList.value; // module big
el.classList.length; // 2
el.classList.add(cool); // adds the class cool, so module big cool
el.classList.remove(big); // removes big, so module cool
el.classList.toggle(big); // adds big back, because it was missing (goes back and forth)
el.classList.contains(module); // true
There’s even more, and classList itself behaves like an array so you can forEach it and such. That’s a pretty strong reason to use classes, as the DOM API around them is so handy.
Another attribute type that has a somewhat fancy help is data-*. Say you’ve got:
You’ve got dataset:
el.dataset;
/*
{
active: true,
placement, top right
*/
el.dataset.active; // true
el.dataset.extraWords; // hi, note the conversion to camelCase
el.dataset.active = false; // setters work like this