JavaScript HTML DOM Елементи

В цьому розділі ви навчитесь знаходити та отримувати доступ до елементів HTML на сторінці HTML.

Пошук елементів HTML

Часто за допомогою JavaScript потрібно маніпулювати елементами HTML.

Для цього вам потрібно спочатку знайти елементи. Є кілька способів зробити це:

• Пошук елементів HTML за ідентифікатором (id)
• Пошук елементів HTML за назвою тегу
• Пошук елементів HTML за назвою класу
• Пошук елементів HTML за допомогою селекторів CSS
• Пошук елементів HTML за колекціями об’єктів HTML

Пошук елемента HTML за ідентифікатором

Найпростіший спосіб знайти елемент HTML у DOM — це використати ідентифікатор (id) елемента.

Цей приклад знаходить елемент із id="intro":

Якщо елемент знайдено, метод поверне елемент як об’єкт (в елементі).

Якщо елемент не знайдено, елемент міститиме null.

Пошук елементів HTML за назвою тегу

Цей приклад знаходить усі елементи <p>:

У цьому прикладі знайдено елемент із id="main", а потім знайдено всі елементи <p> всередині "main":

Пошук елементів HTML за назвою класу

Якщо ви хочете знайти всі елементи HTML з однаковою назвою класу, скористайтеся getElementsByClassName().

Цей приклад повертає список усіх елементів із class="intro".

Пошук елементів HTML за допомогою селекторів CSS

Якщо ви хочете знайти всі елементи HTML, які відповідають указаному селектору CSS (ідентифікатор, назви класів, типи, атрибути, значення атрибутів тощо), використовуйте метод querySelectorAll().

Цей приклад повертає список усіх елементів <p> із class="intro".

Пошук елементів HTML за колекціями об’єктів HTML

Цей приклад знаходить елемент форми з id="frm1" у колекції форми та відображає всі значення елементів:

Наступні об’єкти HTML (і колекції об’єктів) також доступні:

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

<p id="demo"></p>

<script>
 = "Hello";
</script>