Вы можете использовать оба метода querySelector для поиска одного или нескольких элементов с помощью:

класс

document.querySelector('.class__name')

ID

document.querySelector('#ID__name')

атрибут

document.querySelector('input[type="text"]')

атрибут данных

document.querySelector('header[data-info="product-header"]')

Селекторы запросов работают одинаково! И если вы знакомы с jQuery, то у вас нет проблем с этим 👍

Как выбрать 1 элемент на странице с помощью JavaScript

Чтобы выбрать один единственный элемент на HTML-странице, вам понадобится document.querySelector()! Просто введите условие в качестве параметра, и DOM будет искать элемент.

Например, мы хотим найти заголовок с классом header__main. (как вы могли заметить, я использовал шаблон из видео БЭМ).

document.querySelector('.header__main')

document.querySelector вернет первый элемент на странице, соответствующий селектору.

Элемент представляет собой объект NodeList. Вы можете найти много информации о вашем элементе в этом объекте. Например: стиль, высота, ширина, имена классов, атрибуты данных, дочерние элементы и многое другое!

Если вы хотите использовать высоту или ширину элемента, вам нужно сделать это следующим образом.

var headerElement = document.querySelector('.header__main')
var headerHeight = headerElement.clientHeight;
var headerWidth = headerElement.clientWidth;

Как получить несколько элементов на странице

Чтобы выбрать несколько элементов на HTML-странице, вам понадобится document.querySelectorAll()! Вставьте свой селектор, и вы получите все элементы.

document.querySelectorAll вернет все элементы на странице, соответствующие селектору, как объект NodeList.

Например, у вас есть навигация. Но в JavaScript вы хотите иметь доступ ко всем элементам ‹li›. Тогда на помощь приходит метод querySelectorAll()!

HTML

<nav class=“main-nav”>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

JavaScript

var navElements = document.querySelectorAll('.main-nav li');
navElements.forEach(function(navElement) {
  console.log('navElement: ', navElement);
})

Я обнаружил, что не все браузеры принимают метод forEach() для объекта NodeList. Так что лучше выбрать цикл for.

var navElements = document.querySelectorAll('.main-nav li');

for (var i = 0; i < navElements.length; i++) {
  console.log('navElements[i]: ', navElements[i].clientHeight);
}

Этот объект NodeList похож на массив, но есть разница. Прочтите на Quora, в чем разница между объектом NodeList и массивом.

Если вам нужна помощь или у вас есть вопросы о querySelector, дайте мне знать, чтобы я мог вам помочь! Вы можете оставить свой ответ в комментариях или просто зарегистрироваться в нашем открытом Групповом сообществе Facebook!

Подпишитесь на нас в:

Подпишитесь на нас в Medium: https://medium.com/mr-frontend-community
 Подпишитесь на нас в Twitter: https://twitter.com/frontendmr
 Подпишитесь на нас в Facebook: http://facebook.com/mrfrontendcommunity/
Подпишитесь на нас в Instagram: @mrfrontend

Первоначально опубликовано в Mr Frontend Blog.