querySelectorAll()

Data Attribute

The querySelectorAll() method is a powerful way to select elements in an HTML document using CSS selectors. It returns a NodeList of all elements that match the given CSS selector.

To find elements with one or more data attributes, you can use the [attribute] selector. For example, the following code selects all elements with a data-id attribute:

document.querySelectorAll("[data-id]")

You can also select elements that have a specific value for a data attribute by using the = operator. For example, the following code selects all elements with a data-id attribute that has the value "example":

document.querySelectorAll("[data-id='example']")

You can also select elements that contain a specific value for a data attribute by using the *= operator. For example, the following code selects all elements with a data-id attribute that contains the value "example":

document.querySelectorAll("[data-id*='example']")

You can also select elements that starts with a specific value for a data attribute by using the ^= operator. For example, the following code selects all elements with a data-id attribute that starts with "example":

document.querySelectorAll("[data-id^='example']")

You can also select elements that ends with a specific value for a data attribute by using the $= operator. For example, the following code selects all elements with a data-id attribute that ends with "example":

document.querySelectorAll("[data-id$='example']")

You can chain multiple selectors together to select elements with multiple data attributes. For example, the following code selects all elements with both a data-id and data-name attribute:

document.querySelectorAll("[data-id][data-name]")

It's important to note that the querySelectorAll() method returns a NodeList, which is not an Array. If you need to use Array methods like forEach() or map() on the returned elements, you can convert the NodeList to an Array by using the Array.from() method or by using the spread operator.

let selectedElements = Array.from(document.querySelectorAll("[data-id]"))

or

let selectedElements = [...document.querySelectorAll("[data-id]")]

You can also use the forEach() method to loop over the elements in the NodeList

document.querySelectorAll("[data-id]").forEach(function(element) { console.log(element.innerHTML); });

This is a basic example of how to use the querySelectorAll() method to find elements with one or more data attributes. You can use it to select elements in an HTML document using a variety of CSS selectors and operators.