Обєкт document в JavaScript. Методи і властивості обєкта document

26

Від автора: вітаю вас, друзі. У цій статті ми з вами познайомимося з об’єктом document у JavaScript, а також дізнаємося, як вибирати елементи верстки в документі і маніпулювати вибраними елементами.

Почнемо з того, що таке об’єкт document. Об’єкт document, як випливає з назви, — це ні що інше, як HTML-сторінка, з якої ми працюємо в даний момент або, як ще кажуть, документ. У даній статті ми не будемо зупинятися на поняття об’єктної моделі документа, про це ви можете дізнатися з наших уроків і курсу з JavaScript.

Ми ж відразу перейдемо до методів об’єкту document. Отже, у нас є найпростіша верстка:

Hello, world!

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Наше завдання — звернутися для початку заголовка і вибрати його для подальшої роботи. Заголовок 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 у наступних статтях. Удачі!