How to select a element using data attribute in JavaScript
In this tutorial, we are going to learn how to select/access an html element using the data attribute in JavaScript.
Consider, we have html elements with data attributes.
Now, we need to select the above elements by data attribute in JavaScript.
Selecting the Single element
To select the single element, we need to use document.querySelector() method by passing a [data-attribute = ‘value’] as an argument.
Selecting the Multiple elements
To select the multiple elements with the same data attribute name, we need to use the document.querySelectorAll() method by passing a [data-attribute] as an argument.
In the above example, the querySeletorAll() method returns the multiple elements in an array to access each element we need to loop through it.
javascript: выберите все элементы с атрибутом» data — » (без jQuery)
без использования jQuery, каков наиболее эффективный способ выбрать все элементы dom, которые имеют определенный (скажем data-foo ). Элементы могут быть разными элементами тегов.
6 ответов
даст вам все элементы с этим атрибутом.
получит только те, значение которых равно 1.
в то время как не так красиво, как querySelectorAll (который имеет множество проблем), вот очень гибкая функция, которая рекурсирует DOM и должна работать в большинстве браузеров (старых и новых). Пока браузер поддерживает ваше условие (т. е. атрибуты данных), вы должны иметь возможность получить элемент.
для любопытных: не беспокойтесь, тестируя это против QSA на jsPerf. Браузеры, такие как Opera 11, будут кэшировать запрос и искажать результаты.
вы тогда можете инициируйте его следующим образом:
recurseDOM(document.body, <"1": 1>); для скорости, или просто recurseDOM(document.body);
Не уверен, кто ударил меня с -1, но вот доказательство.
здесь — интересное решение: он использует движок CSS браузеров для добавления фиктивного свойства к элементам, соответствующим селектору, а затем оценивает вычисленный стиль, чтобы найти соответствующие элементы:
он динамически создает правило стиля [. ] Затем он сканирует весь документ (используя очень осуждается и IE-специфичный, но очень быстрый документ.все) и получает вычисленный стиль для каждого из элементов. Затем мы ищем foo собственность на результирующий объект и проверьте, оценивается ли он как «бар.» Для каждого элемента, который соответствует, мы добавляем в массив.
Select all elements with a "data-xxx" attribute without using jQuery
Using only pure JavaScript, what is the most efficient way to select all DOM elements that have a certain data- attribute (let’s say data-foo ).
The elements may be different, for example:
7 Answers 7
will get you all elements with that attribute.
will only get you ones with a value of 1.
to get list of all elements having attribute data-foo
If you want to get element with data attribute which is having some specific value e.g
and I want to get div with data-foo set to "2"
But here comes the twist what if I want to match the data attirubte value with some variable’s value like I want to get element if data-foo attribute is set to i
so you can dynamically select the element having specific data element using template literals
Note even if you don’t write value in string it gets converted to string like if I write
and then inspect the element in Chrome developer tool the element will be shown as below
You can also cross verify by writing below code in console
why I have written ‘dataFoo’ though the attribute is data-foo reason dataset properties are converted to camelCase properties