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

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

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

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

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

<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.

var h1 = document.getElementById('h1');
console.log(h1);

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

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

var h1 = document.getElementById('h1');
h1.style.background = '#ccc';

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

document.getElementById('h1').style.background = '#ccc';

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

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

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

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

document.getElementsByClassName('yellow').style.background = 'yellow';
document.getElementsByClassName('grey').style.background = 'grey';

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

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

var yellow = document.getElementsByClassName('yellow');
console.log(yellow);

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

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

var yellow = document.getElementsByClassName('yellow');
yellow[0].style.background = 'yellow';
yellow[1].style.background = 'yellow';

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

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

for(var k = 0; k < yellow.length; k++){
    yellow[k].style.background = 'yellow';
}

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

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

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

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

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree