Get elements by data attribute in JavaScript
Question:
How to get elements by data attribute in JavaScript? Answer:
const itemList = document.querySelectorAll('li[data-id]');
Description:
In the querySelectorAll method, the selector parameter is a string containing one or more selectors to match against. This string must be a valid CSS selector string. This also means you can use the data attribute to collect the required elements.
For example, to get all li
element that has a data-id
attribute you can use the query:
const listItems = document.querySelectorAll('li[data-id]');
Reference:
querySelectorAll
Returns a static NodeList representing a list of the document's elements that match the specified group of selectors.
JavaScript:
querySelectorAll(selectors)
TypeScript:
querySelectorAll(selectors: K): NodeListOf;
Examples:
const items = document.querySelectorAll(".highlighted > p");
Share "How to get elements by data attribute in JavaScript?"
Related snippets:
- Create HTML element with attributes in JavaScript
- Get element by ID in React
- Set the required attribute in JavaScript
- Get elements by data attribute in JavaScript
- Add class to the clicked element in JavaScript
- Add class to multiple elements in JavaScript
- Add class to element if it does not already exists with JavaScript
- Add data attribute to element in JavaScript
- Add CSS class to body with JavaScript
- Add class to parent element in JavaScript
- Toggle fullscreen and normal mode with JavaScript
- Play video in fullscreen with vanilla JavaScript
- Select HTML elements by CSS selectors in vanilla JavaScript
- Exit from fullscreen mode on click in JavaScript
- Switch browser to fullscreen mode with JavaScript
- Get the value of text input field in JavaScript
- Get element with data- attribute using vanilla JavaScript
- Get the value of selected radio button in JavaScript
- Get selected option from select using JavaScript
- Check if element is hidden in JavaScript
Tags:
get, find, element, data, attribute, vanilla, javascript Technical term:
Get elements by data attribute in JavaScript