Метод querySelector, поиск элемента

Кекс добрался до офиса и первым делом заглянул к вам. Босс хочет внести несколько правок на страницу: указать, что отвёртка «Буравочка» — товар дня, и отметить молоток «Мьёльнир» недоступным для заказа.

Казалось бы, зачем здесь JavaScript, можно ведь поменять разметку или стили. Но ни к тому, ни к другому доступа у нас нет. Так решил владелец магазина. Мы можем менять страницу только с помощью скриптов.

JavaScript особым образом воспринимает разметку: элементы здесь не строки, которые мы пишем в HTML-файлах, а объекты. При этом каждый объект связан с другими такими же объектами и знает о своём родителе, соседних объектах-элементах, вложенных объектах. В итоге получается древовидная структура, которая называется DOM (Document Object Model или объектная модель документа).

В каждом DOM-дереве есть корневой объект, из которого «растут» другие объекты. Он называется document. Этот глобальный объект доступен во всех программах, которые работают в браузере. Проще говоря, document — страница, которая содержит все элементы разметки (объекты).

С помощью document разработчики могут найти любой объект на странице, а потом изменить его. Для этого у объекта document есть специальные методы поиска.

Самый гибкий из них — querySelector. Этот метод принимает CSS-селектор и возвращает подходящий элемент. Он понимает любые CSS-селекторы и вызывается так:

// Поиск элемента по тегу
var list = document.querySelector('ul');

// Поиск последнего элемента из списка
var lastProduct = document.querySelector('li:last-child');

// Поиск элемента по классу
var price = document.querySelector('.price');

// Поиск третьего элемента из списка товаров
var thirdProduct = document.querySelector('.product:nth-child(3)');

Посмотрим на страницу магазина. Перед нами список, где каждый товар — li с классом product. Отвёртка «Буравочка», которая должна стать товаром дня, вторая в разметке. Значит, нам нужно найти второй элемент в списке. Для этого можно использовать селектор .product:nth-child(2). Молоток «Мьёльнир», которого нет в наличии, расположен последним. Его можно найти через .product:last-child.

CSS-селекторов много и найти любой элемент можно разными способами. Познакомиться с CSS-селекторами или освежить о них знания можно в следующих частях:

• Селекторы. Знакомство.
• Селекторы. Погружение.
• Селекторы. Тонкости.

Найдём второй и последний DOM-элемент из списка товаров, выведем их в консоль и убедимся, что поиск сработал верно.