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

22

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

Отже, в попередній статті ми з вами познайомилися з двома методами для вибірки елементів документа: метод getElementById і getElementsByClassName. Перший з них дозволяє вибрати потрібний елемент по його ідентифікатору, другий ж дозволяє отримати колекцію (масив) елементів за вказаною класу.

Однак, це далеко не всі методи об’єкта document для вибірки елементів. Наступний корисний метод — getElementsByTagName. Цей метод дозволяє отримати колекцію елементів за їх імені, тобто ім’я тега (div, p, input тощо). Давайте спробуємо знайти всі параграфи в цьому шматочку верстки:

Hello, world!

Yellow 1

Grey

Yellow 2

Grey

var p = document.getElementsByTagName (p’);
console.log(p);

В результаті всі 4 параграфа потрапили в коллецию:

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

А що, якщо нам потрібні не всі параграфи на сторінці, а тільки параграфи певного блоку? Не проблема. Метод getElementsByTagName може шукати елементи не тільки у всьому документі, але і в локальному його ділянці:

var p = document.getElementById(‘container1′).getElementsByTagName (p’);
console.log(p);

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

В результаті ми отримали тільки потрібні елементи сторінки. Також метод getElementsByTagName в якості параметра може застосувати зірочку (*), це буде означати, що ми хочемо отримати всі елементи, а не якийсь конкретний. Приклад:

var p = document.getElementById(‘container1’).getElementsByTagName(‘*’);
console.log(p);

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

Наступний корисний метод — querySelectorAll. Він повертає всі елементи за переданим селектору CSS. В якості прикладу давайте виберемо всі параграфи з класом yellow всередині першого блоку:

var p = document.getElementById(‘container1’).querySelectorAll(‘p.yellow’);
console.log(p);

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

Ну і ще один метод — querySelector. Його відмінність від попереднього в тому, що querySelector повертає лише один, перший-ліпший елемент:

var p = document.getElementById(‘container1’).querySelector(‘p.yellow’);
console.log(p);

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

І останній метод, з яким ми познайомимося, — метод closest(). Цей метод шукає найближчий батьківський елемент по заданому селектору. Приклад:

Hello, world!

Yellow 1

Grey

Yellow 2

var elem = document.getElementById(‘container1’).querySelector(‘h1’);
console.log(elem.closest(‘div’));
console.log(elem.closest(‘#row’));
console.log(elem.closest(‘.container’));
console.log(elem.closest(‘h1’));

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

Зверніть увагу на останній висновок в консоль. Крім батьківського елемента, сам елемент також бере участь у пошуку, так що будьте обережні, оскільки замість батьківського елемента можна вибрати і сам елемент.

На цьому у мене все. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!