Как найти элемент по data атрибуту js

document.querySelectorAll('[data-foo]')

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

<div data-foo="1"></div>
<div data-foo="2"></div>

and I want to get div with data-foo set to “2”

document.querySelector('[data-foo="2"]')

But here comes the twist … what if I want to match the data attirubte value with some variable’s value? For example, if I want to get the elements where data-foo attribute is set to i

var i=2;

so you can dynamically select the element having specific data element using template literals

document.querySelector(`[data-foo="${i}"]`)

Note even if you don’t write value in string it gets converted to string like if I write

<div data-foo=1></div>

and then inspect the element in Chrome developer tool the element will be shown as below

<div data-foo="1"></div>

You can also cross verify by writing below code in console

console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'))

why I have written 'dataFoo' though the attribute is data-foo reason dataset properties are converted to camelCase properties

I have referred below links:

• MDN: data-*
• MDN: Using data attributes

Sometimes it is useful to be able to query for elements in the DOM using their data attributes.

Data attributes are a way to associate data with elements in the DOM. Any attribute that starts with a data- prefix is considered a data attribute.

In this post, we will learn how to query for elements using their data attributes.

Querying for Elements Using Data Attributes

For our example, let’s assume this is our DOM:

	<div data-id="1" data-name="foo">Foo</div>
<div data-id="2" data-name="bar">Bar</div>
<div data-id="3" data-name="baz">Baz</div>

Querying a Single Element

Let’s start with the simplest query, getting a single element. We’ll be using docuemnt.querySelector() to do this.

Simply pass in the data attribute name and value as arguments to document.querySelector() and you will get the element:

	const foo = document.querySelector('[data-name="foo"]');

console.log(foo);

Querying Multiple Elements

You can go from querying a single element to querying multiple elements.

To do this, we will be using document.querySelectorAll() instead of document.querySelector().

Let’s try querying all elements with the data-name attribute:

	const names = document.querySelectorAll("[data-name]");

console.log(names);

Notice that we get an array of elements back. This means we can loop through the array to get each element.

Here’s how we can use the forEach() method to loop through the array:

	names.forEach(name => console.log(name));

You can also use a normal for loop to get all the elements one-by-one:

	for (const name of names) {
    console.log(name);
}

Conclusion

In this post, we learned how to query for elements using their data attributes.

We can either get single elements using document.querySelector() or multiple elements using document.querySelectorAll().

Hopefully, this has been useful to you. Happy coding!

• Support Us

• Join

• Share

• Tweet

• Share

Здравствуйте.
Нашел и собрал вот такой код с ошибками (ошибки data-reactid, elem = document.querySelector(#data-reactid); ):

<script>
function chpok(data-reactid){
    elem = document.querySelector(#data-reactid); //находим блок div который нужно как-то передать в функцию по data-reactid
    state = elem.style.display; //смотрим, включен ли сейчас элемент
    if (state =='') elem.style.display='none'; //если включен, то выключаем
    else elem.style.display=''; //иначе - включаем
}
</script>

Он должен работать (т.е. отображать блоки div или скрывать при нажатии на кнопки) для тегов HTML вида:

<button onclick="chpok('.1.$0')">
Вопрос 1
</button>
<div data-reactid='.1.$0' style="display:none">
Это выводится первый вопрос?
</div>
<button onclick="chpok('.1.$1')">
Вопрос 2
</button>
<div data-reactid='.1.$1' style="display:none">
Тут выводится второй вопрос.
</div>

Если везде заменить “data-reactid” на “id”, и ошибочную строку на строку elem = document.getElementById(id); то все работает, но проблема в том, что в тегах на сайте нет и не будет аттрибута id. Подскажите пожалуйста можно ли получить элемент по атрибуту тега вида “data-reactid” – они уникальны для каждого объекта на странице. И что тогда нужно сделать? Заранее спасибо за любой ответ.

Мы можем использовать data- атрибуты для хранения данных в наших HTML-элементах.

Следовательно, мы можем захотеть получить эти элементы и использовать их.

В этой статье мы рассмотрим, как выбрать все элементы с атрибутом data- с помощью стандартного JavaScript.

Выделите все элементы с атрибутом «data- *» с помощью ванильного JavaScript

Мы можем выбрать все элементы с атрибутом data- с помощью метода document.querySelectorAll.

Например, мы можем написать следующий HTML:

<p data-foo='1'>
  1
</p>
<p data-foo='2'>
  2
</p>

Затем мы можем выбрать все элементы с атрибутом data-foo, написав:

const dataFoo = document.querySelectorAll('[data-foo]');
console.log(dataFoo)

Чтобы выбрать элементы с атрибутом data-foo, установленным на заданное значение, мы можем написать:

const dataFoo = document.querySelectorAll('[data-foo="1"]');
console.log(dataFoo)

Затем мы получаем атрибут data-foo со значением, равным 1.

Чтобы получить значение атрибута value из объекта элемента, мы можем использовать свойство dataset.

Например, мы можем написать:

const dataFoo = document.querySelector('[data-foo="1"]');
console.log(dataFoo.dataset.foo)

для выбора элемента с атрибутом data-foo, установленным на 1 с document.querySelector.

Затем мы используем dataFoo.dataset.foo, чтобы получить значение атрибута data-foo из выбранного элемента.

Свойство dataFoo.dataset.foo также является сеттером, поэтому мы можем написать:

const dataFoo = document.querySelector('[data-foo="1"]');
dataFoo.dataset.foo = 3

чтобы заменить значение атрибута data-foo, равное 1, на 3.

Заключение

Мы можем выбрать все элементы с заданным атрибутом data-, установленным с помощью метода document.querySelectorAll с заданным селектором.

Больше контента на plainenglish.io