Javascript как найти элемент по атрибуту

Yes, the function is querySelectorAll (or querySelector for a single element), which allows you to use CSS selectors to find elements.

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property="value"]'); // All with "property" set to "value" exactly.

(Complete list of attribute selectors on MDN.)

This finds all elements with the attribute property. It would be better to specify a tag name if possible:

document.querySelectorAll('span[property]');

You can work around this if necessary by looping through all the elements on the page to see whether they have the attribute set:

var withProperty = [],
    els = document.getElementsByTagName('span'), // or '*' for all types of element
    i = 0;

for (i = 0; i < els.length; i++) {
    if (els[i].hasAttribute('property')) {
        withProperty.push(els[i]);
    }
}

Libraries such as jQuery handle this for you; it’s probably a good idea to let them do the heavy lifting.

For anyone dealing with ancient browsers, note that querySelectorAll was introduced to Internet Explorer in v8 (2009) and fully supported in IE9. All modern browsers support it.

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

В этой статье мы изучим методы JavaScript для поиска элементов в HTML-документе: querySelector, querySelectorAll, getElementById и другие. Кроме них рассмотрим ещё следующие: matches, contains и closest. Первые два из них могут быть полезны для выполнения различных проверок, а третий использоваться, когда нужно получить родительский элемент по CSS-селектору.

Методы для выбора HTML-элементов

Работа с веб-страницей так или иначе связана с манипулированием HTML-элементами. Но перед тем, как над ними выполнить некоторые действия (например, добавить стили), их сначала нужно получить.

Выбор элементов в основном выполняется с помощью этих методов:

• querySelector;
• querySelectorAll.

Они позволяют выполнить поиск HTML-элементов по CSS-селектору. При этом querySelector выбирает один элемент, а querySelectorAll – все.

Кроме них имеются ещё:

• getElementById;
• getElementsByClassName;
• getElementsByTagName;
• getElementsByName.

Но они сейчас применяются довольно редко. В основном используется либо querySelector, либо querySelectorAll.

querySelectorAll

Метод querySelectorAll применяется для выбора всех HTML-элементов, подходящих под указанный CSS-селектор. Он позволяет искать элементы как по всей странице, так и внутри определённого элемента:

// выберем элементы по классу item во всем документе
const items = document.querySelectorAll('.item');
// выберем .btn внутри #slider
const buttons = document.querySelector('#slider').querySelectorAll('.btn');

Здесь на первой строчке мы нашли все элементы с классом item. На следующей строчке мы сначала выбрали элемент с id="slider", а затем в нём все HTML-элементы с классом btn.

Метод querySelectorAll как вы уже догадались принимает в качестве аргумента CSS-селектор в формате строки, который соответственно и определяет искомые элементы. В качестве результата querySelectorAll возвращает объект класса NodeList. Он содержит все найденные элементы:

Полученный набор представляет собой статическую коллекцию HTML-элементов. Статической она называется потому, что она не изменяется. Например, вы удалили элемент из HTML-документа, а в ней как был этот элемент, так он и остался. Чтобы обновить набор, querySelectorAll нужно вызвать заново:

Узнать количество найденных элементов можно с помощью свойства length:

// выберем элементы с атрибутом type="submit"
const submits = document.querySelectorAll('[type="submit"]');
// получим количество найденных элементов
const countSubmits = submits.length;

Обращение к определённому HTML-элементу коллекции выполняется также как к элементу массива, то есть по индексу. Индексы начинаются с 0:

// получим первый элемент
const elFirst = submits[0];
// получим второй элемент
const elSecond = submits[1];

Здесь в качестве результата мы получаем HTML-элемент или undefined, если элемента с таким индексом в наборе NodeList нет.

Перебор коллекции HTML-элементов

Перебор NodeList обычно осуществляется с помощью forEach:

// получим все <p> на странице
const elsP = document.querySelectorAll('p');
// переберём выбранные элементы
elsP.forEach((el) => {
  // установим каждому элементу background-color="yellow"
  el.style.backgroundColor = 'yellow';
});

Также перебрать набор выбранных элементов можно с помощью цикла for или for...of:

// получим все элементы p на странице
const elsP = document.querySelectorAll('p');
// for
for (let i = 0, length = elsP.length; i < length; i++) {
  elsP[i].style.backgroundColor = 'yellow';
}
// for...of
for (let el of elsP) {
  el.style.backgroundColor = 'yellow';
}

querySelector

Метод querySelector также как и querySelectorAll выполняет поиск по CSS-селектору. Но в отличие от него, он ищет только один HTML-элемент:

// ищем #title во всём документе
const elTitle = document.querySelector('#title');
// ищем footer в <body>
const elFooter = document.body.querySelector('footer');

На первой строчке мы выбираем HTML-элемент, имеющий в качестве id значение title. На второй мы ищем в <body> HTML-элемент по тегу footer.

В качестве результата этот метод возвращает найденный HTML-элемент или null, если он не был найден.

querySelector всегда возвращает один HTML-элемент, даже если под указанный CSS-селектор подходят несколько:

<ul id="list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<script>
  // выберем <li>, расположенный в #list
  const elFirst = document.querySelector('#list > li');
  elFirst.style.backgroundColor = 'yellow';
</script>

Задачу, которую решает querySelector можно выполнить через querySelectorAll:

const elFirst = document.querySelectorAll('#list > li')[0];

Но querySelector в отличие от querySelectorAll делает это намного быстрее, да и писать так проще. То есть querySelectorAll не возвращает как querySelector сразу же первый найденный элемент. Он сначала ищет все элементы, и только после того, как он это сделает, мы можем уже обратиться к первому HTML-элементу в этой коллекции.

Обычно перед тем, как выполнить какие-то действия с найденным HTML-элементом необходимо сначала проверить, а действительно ли он был найден:

const elModal = document.querySelector('.modal');
// если элемент .modal найден, то ...
if (elModal) {
  // переключим у elModal класс show
  elModal.classList.toggle('show');
}

Здесь мы сначала проверили существования HTML-элемента, и только потом выполнили над ним некоторые действия.

Методы getElement(s)By* для выбора HTML-элементов

Здесь мы рассмотрим методы, которые сейчас применяются довольно редко для поиска HTML-элементов. Но в некоторых случаях они могут быть очень полезны. Это:

• getElementById – получает один элемент по id;
• getElementsByClassName – позволяет найти все элементы с указанным классом или классами;
• getElementsByTagName – выбирает элементы по тегу;
• getElementsByName – получает все элементы с указанным значением атрибута name.

1. Метод getElementById позволяет найти HTML-элемент на странице по значению id:

<div id="comments">...</div>
...
<script>
  // получим HTMLElement и сохраним его в переменную elComments
  const elComments = document.getElementById('comments');
</script>

В качестве результата getElementById возвращает объект класса HTMLElement или значение null, если элемент не был найден. Этот метод имеется только у объекта document.

Указывать значение id необходимо с учётом регистра. Так например, document.getElementById('aside') и document.getElementById('ASIDE') ищут элементы с разным id.

Обратите внимание, что в соответствии со стандартом в документе не может быть несколько тегов с одинаковым id, так как значение идентификатора на странице должно быть уникальным.

Тем не менее, если вы допустили ошибку и в документе существуют несколько элементов с одинаковым id, то метод getElementById более вероятно вернёт первый элемент, который он встретит в DOM. Но на это полагаться нельзя, так как такое поведение не прописано в стандарте.

То, что делает getElementById можно очень просто решить посредством querySelector:

// получим элемент #title
const elTitle = document.getElementById('title');
// получим элемента #title, используя querySelector
const elTitleSame = document.querySelector('#nav');

Кстати, оба этих метода возвращают в качестве результата один и тот же результат. Это либо HTML-элемент (экземпляр класса HTMLElement) или null, если элемент не найден.

2. Метод getElementsByClassName позволяет найти все элементы с заданным классом или классами. Его можно применить для поиска элементов как во всём документе, так и внутри указанного. В первом случае его нужно будет вызывать как метод объекта document, а во втором – как метод соответствующего HTML-элемента:

// найдем элементы с классом control в документе
const elsControl = document.getElementsByClassName('control');
// выберем элементы внутри другого элемента, в данном случае внутри формы с id="myform"
const elsFormControl = document.forms.myform.getElementsByClassName('form-control');

В качестве результата он возвращает живую HTML-коллекцию найденных элементов. Чем живая коллекция отличается от статической мы рассмотрим ниже.

Здесь мы сохранили найденные элементы в переменные elsControl и elsFormControl. В первой переменной будет находиться HTMLCollection, содержащая элементы с классом control. Во второй – набор элементов с классом form-control, находящиеся в форме с id="myform". Для получения этой формы мы использовали document.forms.myform.

Метод getElementsByClassName позволяет искать элементы не только по одному классу, но и сразу по нескольким, которые должны присутствовать у элемента:

// выберем элементы .btn.btn-danger
const elsBtn = document.getElementsByClassName('btn btn-danger');

На querySelectorAll этот пример решается так:

const elsBtn = document.querySelectorAll('.btn.btn-danger');

3. Метод getElementsByTagName предназначен для получения коллекции элементов по имени тега:

// найдем все <a> в документе
const anchors = document.getElementsByTagName('a');
// найдем все >li> внутри #list
const elsLi = document.getElementById('list').getElementsByTagName('li');

На первой строчке мы выбрали все <a> в документе и присвоили полученную HTMLCollection переменной anchors. На второй – мы сначала получили #list, а затем в нём нашли все <li>.

Задачу по выбору элементов внутри другого элемента с помощью querySelectorAll выполняется намного проще:

const elsLi = document.querySelectorAll('#list li');

Для выбора всех элементов можно использовать символ *:

// выберем все элементы в <body>
const els = document.body.getElementsByTagName('*');

4. В JavaScript getElementsByName можно использовать для выбора элементов, имеющих определенное значение атрибута name:

// получим все элементы с name="phone"
const elsPhone = document.getElementsByName('phone');

Через querySelectorAll это выполняется так:

const elsPhone = document.querySelectorAll('[name="phone"]');

getElementsBy* и живые HTML-коллекции

В JavaScript getElementsByTagName, getElementsByClassName и getElementsByName в отличие от других методов (например, querySelectorAll) возвращают живую коллекцию HTML-элементов (на английском live HTMLCollection). То есть коллекцию содержимое которой автоматически обновляется при изменении DOM. Для наглядности рассмотрим следующий пример.

Например, на странице изначально имеется два <li>. Выберем их с помощью getElementsByTagName и сохраним полученную HTMLCollection в переменную els. Теперь с помощью els мы можем получить эту коллекцию. Сейчас в ней два <li>. Затем через 5 секунд, используя setTimeout добавим ещё один <li>. Если сейчас мы обратимся к переменной els, то увидим, что в ней уже находятся три <li>:

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<script>
// получим живую коллекцию <li>
const els = document.getElementsByTagName('li');
// выведем количество <li> в консоль
console.log(`Количество <li>: ${els.length}`); // 2
// через 5 секунд добавим ещё один <li>
setTimeout(() => {
  // вставим на страницу новый <li>
  document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>Three</li>');
// выведем количество <li> в консоль
  console.log(`Количество <li>: ${els.length}`); // 3
}, 5000);
</script>

Как вы видите, здесь полученная коллекция является живой, то есть она может автоматически измениться. В ней сначала было два <li>. Но после того, как мы на страницу добавили ещё один подходящий элемент, в ней их стало уже три.

Если в коде приведённом выше заменить выбор элементов на querySelectorAll, то мы увидим, что в ней находится статическая (не живая) коллекция элементов:

// получим статическую коллекцию
const els = document.querySelectorAll('li'); <li>

Как вы видите количество элементов в коллекции не изменилось. Чтобы после изменения DOM получить актуальную коллекцию элементов, их нужно просто выбрать заново посредством querySelectorAll:

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<script>
// получим статическую коллекцию <li>
let els = document.querySelectorAll('li');
// выведем количество <li> в консоль
console.log(`Количество <li>: ${els.length}`); // 2
// через 5 секунд добавим ещё один <li>
setTimeout(() => {
  // вставим на страницу новый <li>
  document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>Three</li>');
  // получим заново статическую коллекцию <li>
  els = document.querySelectorAll('li');
  // выведем количество <li> в консоль
  console.log(`Количество <li>: ${els.length}`); // 3
}, 5000);
</script>

Таким образом в JavaScript насчитывается 6 основных методов для выбора HTML-элементов на странице. По чему они ищут и что они возвращают приведено на следующем рисунке:

Экземпляры класса HTMLCollection не имеют в прототипе метод forEach. Поэтому если вы хотите использовать этот метод для перебора такой коллекции, её необходимо преобразовать в массив:

const items = document.getElementsByClassName('item');
[...items].forEach((el) => {
  console.log(el);
});

matches, closest и contains

В JavaScript имеются очень полезные методы:

• matches – позволяет проверить соответствует ли HTML-элемент указанному CSS-селектору;
• closest – позволяет найти для HTML-элемента его ближайшего предка, подходящего под указанный CSS-селектор (поиск начинается с самого элемента);
• contains – позволяет проверить содержит ли данный узел другой в качестве потомка (проверка начинается с самого этого узла).

1. Метод matches ничего не выбирает, но он является очень полезным, так как позволяет проверить HTML-элемент на соответствие CSS-селектору. Он возвращает true, если элемент ему соответствует, иначе false.

// выберем HTML элемент, имеющий атрибут data-target="slider"
const elSlider = document.querySelector('[data-target="slider"]');
// проверим соответствует ли он CSS селектору 'div'
const result = element.matches('div');

Пример, в котором выберем все <li>, расположенные внутри #questions, а затем удалим те из них, которые соответствуют селектору .answered:

// выберем все <li> в #questions
const els = document.querySelectorAll('#questions > li');
// переберём выбранные элементы
els.forEach((el) => {
  // если элемент соответствует селектору .answered, то ...
  if (el.matches('.answered')) {
    // удалим элемент
    el.remove();
  }
});

В этом примере проверим каждый <li> на соответствие селектору active. Выведем в консоль каждый такой элемент:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  document.querySelectorAll('li').forEach((el) => {
    if (el.matches('.active')) {
      console.log(el);
    }
  });
  // li.active
</script>

Ранее, в «старых» браузерах данный метод имел название matchesSelector, а также поддерживался с использованием префиксов. Если вам нужна поддержка таких браузеров, то можно использовать следующий полифилл:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
}

2. Метод closest очень часто используется в коде. Он позволяет найти ближайшего предка, подходящего под указанный CSS-селектор. При этом поиск начинается с самого элемента, для которого данный метод вызывается. Если этот элемент будет ему соответствовать, то closest вернёт его.

<div class="level-1">
  <div class="level-2">
    <div class="level-3"></div>
  </div>
</div>

<script>
  const el = document.querySelector('.level-3');
  const elAncestor = el.closest('.level-1');
  console.log(elAncestor);
</script>

Здесь мы сначала выбираем HTML-элемент .level-3 и присваиваем его переменной el. Далее мы пытаемся среди предков этого элемента включая его сам найти такой, который отвечает заданному CSS-селектору, в данном случае .level-1.

Начинается поиск всегда с самого этого элемента. В данном случае он не подходит под указанный селектор. Следовательно, этот метод переходит к его родителю. Он тоже не отвечает этому CSS-селектору. Значит, closest переходит дальше, то есть уже к его родителю. Этот элемент подходит под указанный селектор. Поэтому поиск прекращается и этот метод возвращает его в качестве результата.

Метод closest возвращает null, когда он дошёл бы конца иерархии и не нашёл элемент отвечающий указанному селектору. То есть, если такого элемента нет среди предков.

В этом примере найдем с помощью closest для .active его ближайшего родителя, отвечающего CSS-селектору #list > li:

<ul id="list">
  <li>One</li>
  <li>
    Two
    <ul>
      <li>Four</li>
      <li class="active">Five</li>
    </ul>
  </li>
  <li>Three</li>
</ul>
<script>
  const elActive = document.querySelector('.active');
  const elClosest = elActive.closest('#list > li');
  elClosest.style.backgroundColor = 'yellow';
</script>

В JavaScript closest очень часто используется в обработчиках событий. Это связано с тем, чтобы события всплывают и нам нужно, например, узнать кликнул ли пользователь в рамках какого-то элемента:

document.addEventListener('click', (e) => {
  if (e.closest.matches('.btn__action')) {
    // пользователь кликнул внутри .btn__action
  }
});

3. Метод contains позволяет проверить содержит ли некоторый узел другой в качестве потомка. При этом проверка начинается с самого этого узла, для которого этот метод вызывается. Если узел соответствует тому для которого мы вызываем данный метод или является его потомком, то contains в качестве результата возвращает логическое значение true. В противном случае false:

<div id="div-1">
  <div id="div-2">
    <div id="div-3">...</div>
  </div>
</div>
<div id="div-4">...</div>

<script>
  const elDiv1 = document.querySelector('#div-1');
  elDiv1.contains(elDiv1); // true
  const elDiv3 = document.querySelector('#div-3');
  elDiv1.contains(elDiv3); // true
  const elDiv4 = document.querySelector('#div-4');
  elDiv1.contains(elDiv4); // false
</script>

Здесь выражение elDiv1.contains(elDiv1) возвращает true, так как проверка начинается с самого элемента. Это выражение elDiv1.contains(elDiv3) тоже возвращает true, так как elDiv3 находится внутри elDiv1. А вот elDiv1.contains(elDiv4) в качестве результата возвращает false, так как elDiv4 не находится внутри elDiv1.

В этом примере проверим с помощью contains содержит ли <p> другие узлы в качестве потомка:

<h1>Tag b</h1>
<p>This is <b>tag b</b>.</p>

<script>
  const elP = document.querySelector('p');
  const elB = document.querySelector('b');
  const textNode = elB.firstChild;
  const elH1 = document.querySelector('h1');
  elP.contains(elP); // true
  elP.contains(elB); // true
  elP.contains(elH1); // false
  elP.contains(textNode); // true
</script>

Метод contains позволяет проверить является ли потомком не только узел-элемент, но и любой другой узел. Например, узнаем является ли потомком elDiv1 указанный текстовый узел:

const elDiv1 = document.querySelector('#div-1');
const textNode = document.querySelector('#div-3').firstChild;
elDiv1.contains(textNode); // true

Задачи

1. Узнать количество элементов с атрибутом data-toggle="modal" на странице:

const count = document.querySelectorAll('[data-toggle="modal"]').length;
console.log(count);

2. Найти все элементы <a> с классом nav внутри элемента <ul> :

const anchors = document.querySelectorAll('ul.nav a');

3. Получить элемент по id, значение которого равно pagetitle:

var pagetitle = document.querySelector('#pagetitle');

4. Выполнить поиск элемента по классу nav:

var el = document.querySelector('.nav');

5. Найти элемент <h3>, находящийся в теге <div> с классом comments, который в свою очередь расположен в <main>:

var header = document.querySelector('main div.comments h3');

6. Имеется страница. В ней следует выбрать:

• последний элемент с классом article, расположенный в <main> (решение);
• все элементы .section, находящиеся в .aside кроме 2 второго (решение);
• элемент <nav> расположенный после <header> (решение).