Читать онлайн "JavaScript с нуля" - Чиннатамби Кирупа - RuLit

Есть и другие наборы функций, которые обеспечивает DOM, но о них позже, когда дойдем до соответствующей темы.

КОРОТКО О ГЛАВНОМ

DOM — это наиболее важный компонент функциональности, доступный вам для работы с HTML-документами. Он является тем недостающим звеном, которое связывает HTML и CSS с JavaScript. Помимо этого, он также повышает уровень доступа к браузеру.

Вообще, знание DOM — это только часть веселья. В действительности использование ее функциональности для взаимодействия с веб-документом — это гораздо более объемная и более веселая другая часть. Когда будете готовы, перелистывайте страницу, и будем продолжать.

Если у вас есть вопросы по этой или другой теме, задавайте их на форуме https://forum.kirupa.com.

Глава 25. Поиск элементов в DOM

Как мы видели в предыдущей главе, DOM — это не более чем древовидная структура (рис. 25.1), состоящая из всех элементов нашего HTML-документа.

Но эта деталь важна только отчасти. Действительно же важно то, что, имея все эти связанные с HTML элементы, нужно обращаться к ним для считывания или изменения данных. Есть разные способы отыскать эти элементы. В конечном итоге все они выстроены в древоподобную структуру, а программисты любят придумывать безумные способы просмотра дерева снизу вверх и наоборот в поиске чего-либо.

Не буду принуждать вас к подобной пытке. Пока что. В текущей главе вы научитесь использовать встроенные функции querySelector и querySelectorall, которые удовлетворят большую часть ваших поисковых нужд в DOM.

Поехали!

Рис. 25.1. Действительно выглядит как древовидная структура

Знакомьтесь с семейством querySelector

Чтобы лучше понять всю прелесть возможностей, предоставляемых querySelector и querySelectorAll, взгляните на следующий HTML-код:

</div>

</div>

</div>

</div>

В этом примере у вас есть один 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];