Объект document в JavaScript. Методы и свойства объекта document

Объект document в JavaScript. Методы и свойства объекта document

От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся с объектом document в JavaScript, а также узнаем, как выбирать элементы верстки в документе и манипулировать выбранными элементами.

Начнем с того, что такое объект document. Объект document, как следует из названия, — это ни что иное, как HTML страница, с которой мы работаем в данный момент или, как еще говорят, документ. В данной статье мы не будем останавливаться на понятии объектной модели документа, об этом вы можете узнать из наших уроков и курса по JavaScript.

Мы же сразу перейдем к методам объекта document. Итак, у нас есть простейшая верстка:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Наша задача — обратиться для начала к заголовку и выбрать его для дальнейшей работы. Заголовок H1 имеет одноименный идентификатор. JavaScript предлагает нам метод getElementById(), который позволяет взять из объекта один элемент с указанным идентификатором. К слову, если мы используем определенный id, тогда он должен быть уникален в пределах одного документа, т.е. нельзя размещать в одном документе два элемента с одинаковым атрибутом id.

Дата и время в JavaScript

В результате мы сохранили в переменной h1 объект, которым является конкретный элемент страницы. Теперь мы вольны делать с данным объектом что угодно: изменить шрифт, цвет, фон и т.п. Давайте попробуем изменить фон. Сделать это можно следующим образом:

Собственно, если элемент нам не нужен ни для каких других операций, тогда мы даже можем не сохранять его в переменную, а сразу изменить стиль элемента:

Результат в обоих случая будет одинаков, фон заголовка будет покрашен в указанный цвет:

Дата и время в JavaScript

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Замечательно, не правда ли? Точно таким же образом мы можем обратиться к любому элементу документа, которому присвоен идентификатор. А что если идентификатора нет? Не беда. JavaScript имеет в арсенале и другие методы для работы с объектом document.

Метод getElementsByClassName() позволяет получить коллекцию элементов с указанным классом. Давайте покрасим в соответствующие цвета параграфы на странице:

Дата и время в JavaScript

Упс… не получилось. Все дело в том, что метод getElementsByClassName(), как отмечалось выше, возвращает коллекцию элементов, что логично, поскольку элементов с одним и тем же классом на странице может быть сколь угодно много. Давайте создадим пару абзацев с одинаковым классом и посмотрим, как эти выбранные элементы отобразятся в консоли:

Дата и время в JavaScript

Как видим, у нас действительно не один объект, а коллекция объектов. Коллекция в виде массива. Ну а к каждому конкретному элементу мы можем достучаться через его индекс:

Дата и время в JavaScript

Если элементов на странице много, тогда того же результата можно достичь, использовав цикл:

На этом мы, пожалуй, остановимся и продолжим знакомство с методами объекта document в следующих статьях. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree