Suppose you want to set an attribute without a value to one or more DOM elements in your HTML markup.
What is the best way to accomplish this?
Now that I am done with it, I’d like to share what worked out for me with you.
Element.setAttribute(name, value) method. The method creates an attribute with the specified values or updates the attribute if it already exists.
Element.setAttribute(name, value) method is part of the
Element API, and has full browser support. In turn, the
Element API is an interface within the broader Web APIs specification, which all modern browsers have support for.
How This Works
The syntax for this method is as follows:
Element stands for the DOM element/s that you want to target,
name for the name of the custom HTML attribute to add/update, and
class for the value of the class that goes between that custom HTML attribute’s quotation marks.
To set an attribute without a value, do this:
// Create an an attribute named "my-attribute" without a value Element.setAttribute('my-attribute', '');
On success, your function will add an attribute without a value to the DOM element that you targeted. Or, if the DOM element already had an attribute with this name, it would update and empty it.
Set Empty Attribute to the First Element
Suppose you had a <div> element with an ID of #my-element, and you wanted to set an empty attribute named “custom-attribute” for it.
To target the first DOM element, we use the
The script targets the first occurence of
#my-element, then adds an empty
custom-attribute to its list of attributes:
Set Empty Attribute to the Second, Third, or n-th Element
To target an n-th, and not the first, element, use the :nth-child() selector in CSS.
Let’s take our example code from above. We’ll add three <div> elements this time and, instead of an ID of
#my-element, we will assign them a CSS class of
To target the second element, we use the querySelector() method with an argument of
.my-element:nth-child(2) as you will see in the code snippet below:
Set Empty Attribute to Multiple Elements
We will do this by using the
querySelectorAll() method instead of
querySelector(), which returns a NodeList of all elements matching our CSS selector.
(The main reason behind this is that the
querySelector() no longer works for us; it returns only the first element that matches the target—not all elements that do.)
Then, we will iterate through each of the elements in the NodeList with the
Element.setAttribute() method, which you are already familiar with:
Avoid These Mistakes
Omitting the Second Argument
It’s important to note that, when typing your argument, both
class are required. So if you try to do it like this:
// Omitting the class from the argument won't work Element.setAttribute('my-attribute');
The browser will throw an “Uncaught TypeError: Failed to execute ‘setAttribute’ on ‘Element’: 2 arguments required, but only 1 present.” in the console.
So save yourself the headache by making sure that you’ve typed in both the
class arguments in your statement, with the former set to whatever you like and the latter with empty quotation marks.
If you want to target more than one DOM element and you use the
querySelector() method, your function won’t work.
Instead, make sure to use the
querySelectorAll() method to get a NodeList of all the elements that you can then iterate on.
It happens to the most meticulous among us that, every now and then, we get the target DOM element wrong.
In such a case, even though our function is coded correctly, the selector returns a null for
querySelector() and an empty NodeList for
The good news, as you can see from the snapshot above, is that you can easily get to the root cause for this from your browser’s console.