Get element with data- attribute using vanilla JavaScript
Question:
How to get element with data- attribute using vanilla JavaScript? Answer:
const elements = document.querySelectorAll("li[data-id='2']");Description:
You can find elements in the DOM based on data-* attributes by using the querySelectorAll pure vanilla JavaScript method.
The code above select the second li elements from this code:
<ul>
<li data-id="1">1</li>
<li data-id="2">2</li>
<li data-id="3">3</li>
</ul>Reference:
The querySelectorAll reference
Share "How to get element with data- attribute using vanilla 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:
select, elements, data, attribute, querySelectorAll, pure, vanilla, JavaScript Technical term:
Get element with data- attribute using vanilla JavaScript