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