JavaScript с нуля - [55]
25. Поиск элементов в DOM
Как мы видели в предыдущей главе, DOM — это не более чем древовидная структура (рис. 25.1), состоящая из всех элементов нашего HTML-документа.
Но эта деталь важна только отчасти. Действительно же важно то, что, имея все эти связанные с HTML элементы, нужно обращаться к ним для считывания или изменения данных. Есть разные способы отыскать эти элементы. В конечном итоге все они выстроены в древоподобную структуру, а программисты любят придумывать безумные способы просмотра дерева снизу вверх и наоборот в поиске чего-либо.
Не буду принуждать вас к подобной пытке. Пока что. В текущей главе вы научитесь использовать встроенные функции querySelector и querySelectorall, которые удовлетворят большую часть ваших поисковых нужд в DOM.
Поехали!
Рис. 25.1. Действительно выглядит как древовидная структура
Знакомьтесь с семейством querySelector
Чтобы лучше понять всю прелесть возможностей, предоставляемых querySelector и querySelectorAll, взгляните на следующий HTML-код:
В этом примере у вас есть один div с id main, а также четыре элемента div и img, каждый из которых имеет значение класса pictureContainer и theImage соответственно. В нескольких следующих разделах мы задействуем функции querySelector и querySelectorAll в этом HTML-документе и посмотрим, что это даст.
querySelector
На базовом уровне функция querySelector работает так:
let element = document.querySelector("CSS selector");
Она получает аргумент, который является строкой, представляющей селектор CSS для искомого элемента. querySelector возвращает первый найденный элемент, даже если существуют и другие, на которые может быть нацелен селектор. В этом смысле описываемая функция довольно упряма.
Например, если мы захотим обратиться к div с id main из недавнего примера, то напишем следующее:
let element = document.querySelector("#main");
Так как main является id, синтаксис селектора для нацеливания на него будет #main. Аналогичным образом давайте определим селектор для класса pictureContainer:
let element = document.querySelector(".pictureContainer");
Вернется при этом первый div, чье значение класса будет pictureContainer. Остальные элементы div с тем же значением класса pictureContainer будут просто проигнорированы.
Синтаксис селектора не изменяется и не становится особенным из-за того, что вы работаете в JavaScript. Вы можете использовать для селекторов в точности тот синтаксис, который используете в таблице стилей или в области стилей.
querySelectorAll
Функция querySelectorAll возвращает все найденные элементы, которые совпадают с предоставленным вами селектором:
let elements = document.querySelectorAll("CSS selector");
Все описанное мной относительно querySelector также относится и к querySelectorAll, за исключением числа возвращаемых элементов. Эта важная деталь определяет то, что вы в итоге получаете, используя querySelectorAll. При этом возвращается не единичный элемент, а целый массивоподобный контейнер элементов.
Продолжая недавний пример HTML, то представим, как выглядел бы наш код JavaScript, если бы мы хотели использовать querySelector для помощи в отображении атрибута src среди элементов img, содержащих значение класса theImage:
let images = document.querySelectorAll(".theImage");
for (let i = 0; i < images.length; i++) {
let image = images[i];
console.log(image.getAttribute("src"));
}
Видите? Здесь все достаточно просто. Главное — это запомнить, как работать с массивами, чему к данному моменту вы уже должны были научиться. Еще одна (немного странная) особенность — это загадочная функция getAttribute. Если вы с ней не знакомы и не знаете, как считывать значения элементов, то волноваться не стоит. Мы все это вскоре подробно рассмотрим. Пока просто знайте, что она позволяет вам считывать значение любого HTML-атрибута, который может иметь рассматриваемый HTML-элемент.
Таков синтаксис селектора CSS
Когда я впервые использовал querySelector и querySelectorAll, то меня удивило, что в качестве аргумента они, по сути, получают всевозможные вариации синтаксиса селектора CSS. При этом вам не обязательно делать их простыми, как я показывал до сих пор.
Если вам понадобится нацелиться на все элементы img без необходимости указывать значение класса, то вот как может выглядеть вызов querySelectorAll:
let images = document.querySelectorAll("img");
Если вы захотите нацелиться только на изображение, чей атрибут src установлен как meh.png, то можете сделать следующее:
let images = document.querySelectorAll("img[src='meh.png']");
Обратите внимание, что я просто указал
