От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся с объектом document в JavaScript, а также узнаем, как выбирать элементы верстки в документе и манипулировать выбранными элементами.
Начнем с того, что такое объект document. Объект document, как следует из названия, — это ни что иное, как HTML страница, с которой мы работаем в данный момент или, как еще говорят, документ. В данной статье мы не будем останавливаться на понятии объектной модели документа, об этом вы можете узнать из наших уроков и курса по JavaScript.
Мы же сразу перейдем к методам объекта document. Итак, у нас есть простейшая верстка:
|
1 2 3 4 5 |
<div class="container"> <h1 id="h1">Hello, world!</h1> <p class="yellow" id="yellow">Lorem ipsum dolor sit amet.</p> <p class="grey" id="grey">Lorem ipsum dolor sit amet.</p> </div> |
Наша задача — обратиться для начала к заголовку и выбрать его для дальнейшей работы. Заголовок H1 имеет одноименный идентификатор. JavaScript предлагает нам метод getElementById(), который позволяет взять из объекта один элемент с указанным идентификатором. К слову, если мы используем определенный id, тогда он должен быть уникален в пределах одного документа, т.е. нельзя размещать в одном документе два элемента с одинаковым атрибутом id.
|
1 2 |
var h1 = document.getElementById('h1'); console.log(h1); |
В результате мы сохранили в переменной h1 объект, которым является конкретный элемент страницы. Теперь мы вольны делать с данным объектом что угодно: изменить шрифт, цвет, фон и т.п. Давайте попробуем изменить фон. Сделать это можно следующим образом:
|
1 2 |
var h1 = document.getElementById('h1'); h1.style.background = '#ccc'; |
Собственно, если элемент нам не нужен ни для каких других операций, тогда мы даже можем не сохранять его в переменную, а сразу изменить стиль элемента:
|
1 |
document.getElementById('h1').style.background = '#ccc'; |
Результат в обоих случая будет одинаков, фон заголовка будет покрашен в указанный цвет:
Замечательно, не правда ли? Точно таким же образом мы можем обратиться к любому элементу документа, которому присвоен идентификатор. А что если идентификатора нет? Не беда. JavaScript имеет в арсенале и другие методы для работы с объектом document.
Метод getElementsByClassName() позволяет получить коллекцию элементов с указанным классом. Давайте покрасим в соответствующие цвета параграфы на странице:
|
1 2 |
document.getElementsByClassName('yellow').style.background = 'yellow'; document.getElementsByClassName('grey').style.background = 'grey'; |
Упс… не получилось. Все дело в том, что метод getElementsByClassName(), как отмечалось выше, возвращает коллекцию элементов, что логично, поскольку элементов с одним и тем же классом на странице может быть сколь угодно много. Давайте создадим пару абзацев с одинаковым классом и посмотрим, как эти выбранные элементы отобразятся в консоли:
|
1 2 |
var yellow = document.getElementsByClassName('yellow'); console.log(yellow); |
Как видим, у нас действительно не один объект, а коллекция объектов. Коллекция в виде массива. Ну а к каждому конкретному элементу мы можем достучаться через его индекс:
|
1 2 3 |
var yellow = document.getElementsByClassName('yellow'); yellow[0].style.background = 'yellow'; yellow[1].style.background = 'yellow'; |
Если элементов на странице много, тогда того же результата можно достичь, использовав цикл:
|
1 2 3 |
for(var k = 0; k < yellow.length; k++){ yellow[k].style.background = 'yellow'; } |
На этом мы, пожалуй, остановимся и продолжим знакомство с методами объекта document в следующих статьях. Удачи!
