- Instant help with your JavaScript coding problems

Get elements by data attribute in JavaScript

by Mike
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:
Tags:
get, find, element, data, attribute, vanilla, javascript
Technical term:
Get elements by data attribute in JavaScript
Trending articles
Fix 'React' refers to a UMD global, but the current file is a moduleFix the object passed as the value prop to the Context provider changes every renderFix the 'React' must be in scope when using JSX errorHow to run useEffect only once in ReactFix the React 18: Hydration failed because the initial UI does not match errorFix npm ERR! enoent ENOENT: no such file or directory errorFix the ReactDOM.render is no longer supported in React 18Fix the TypeError: MiniCssExtractPlugin is not a constructorSolving the Uncaught SyntaxError: Cannot use import statement outside a moduleRemove element from an array
Trending snippets
Remove accents from a string in JavaScriptGenerate random date with JavaScriptDetect escape key press in JavaScriptConvert snake case to camel case in JavaScriptConvert camel case to snake case in JavaScriptSolving the Error [ERR_REQUIRE_ESM]: require() of ES Module not supportedConvert a string to sentence case in JavaScriptSolving the Error: Must use import to load ES ModuleDetect fullscreen mode with JavaScriptDetect Ctrl+C and Ctrl+V using JavaScriptConvert string to pascal case in JavaScriptRemove emojis from a string with JavaScriptGet selected option from select using JavaScriptRemove protocol from URL with JavaScriptReplace line break with br in JavaScriptGet yesterday's date in JavaScriptAdd class to parent element in JavaScriptReplace spaces with dashes in JavaScriptGet the value of selected radio button in JavaScriptCount the number of lines in a string in JavaScript
Network articles
Solving the stylesheet not loaded because of MIME-typeFix the *.ps1 cannot be loaded because running scripts is disabled on this systemSend JSON data with PostmanFix the Error: 0x8007019e The Windows Subsystem for Linux has not been enabledSet element width over 100% using Tailwind CSSAdd class to child when hovering on parent in TailwindCSSFix the Unknown at rule @tailwind warning in VSCodeReturn 0 if field is NULL in MySQLPrettier stopped working in VS CodeExecute PHP script from command lineSet background opacity only in CSSNavigate back to last cursor position in VS CodeComment out multiple lines in VSCodeGet the last day of a month from date in PHPBackup MySQL database without locking tablesGet yesterday's date in PHPForce line break in a long word using CSSSetup HTTPS for local development on Windows 10PHP for DummiesSetup xdebug 3 debugger for PHP
Quick fix
Fix: Require statement not part of import statement Fix navigator.clipboard is undefined