JavaScript HTML DOM Документ
Об’єкт документа HTML DOM є власником усіх інших об’єктів вашої вебсторінки.
Об’єкт документа HTML DOM
Об’єкт документа представляє вашу вебсторінку.
Якщо ви хочете отримати доступ до будь-якого елемента на сторінці HTML, ви завжди починаєте з доступу до об’єкта документа.
Нижче наведено кілька прикладів того, як ви можете використовувати об’єкт документа для доступу та керування HTML.
Пошук елементів HTML
| Метод | Опис |
|---|---|
| document.getElementById(id) | Знайти елемент по id елемента |
| document.getElementsByTagName(name) | Знайти елемент по назві тегу |
| document.getElementsByClassName(name) | Знайти елемент по назві класу |
Зміна елементів HTML
| Властивість | Опис |
|---|---|
| element.innerHTML = new html content | Змінити внутрішній HTML елемент |
| element.attribute = new value | Змінити значення атрибута елемента HTML |
| element.style.property = new style | Змінити стиль елемента HTML |
| Метод | Опис |
| element.setAttribute(attribute, value) | Змінити значення атрибута елемента HTML |
Додавання та видалення елементів
| Метод | Опис |
|---|---|
| document.createElement(element) | Створити HTML елемент |
| document.removeChild(element) | Видалити HTML елемент |
| document.appendChild(element) | Додати HTML елемент |
| document.replaceChild(new, old) | Замінити HTML елемент |
| document.write(text) | Записати у вихідний потік HTML |
Додавання обробників подій
| Метод | Опис |
|---|---|
| document.getElementById(id).onclick = function(){code} | Додавання коду обробки події до події onclick |
Пошук об’єктів HTML
Перший HTML DOM рівня 1 (1998) визначав 11 об’єктів HTML, колекцій об’єктів і властивостей. Вони все ще діють у HTML5.
Пізніше, у HTML DOM Level 3, було додано більше об’єктів, колекцій і властивостей.
| Властивість | Опис | DOM |
|---|---|---|
| document.anchors | Повертає всі <a> елементи, які мають атрибут name | 1 |
| document.applets | Застаріле | 1 |
| document.baseURI | Повертає абсолютний базовий URI документа | 3 |
| document.body | Повертає елемент <body> | 1 |
| document.cookie | Повертає файл cookie документа | 1 |
| document.doctype | Повертає doctype документа | 3 |
| document.documentElement | Повертає елемент <html> | 3 |
| document.documentMode | Повертає режим, який використовує браузер | 3 |
| document.documentURI | Повертає URI документа | 3 |
| document.domain | Повертає доменне ім’я сервера документів | 1 |
| document.domConfig | Застаріле | 3 |
| document.embeds | Повертає всі елементи <embed> | 3 |
| document.forms | Повертає всі елементи <form> | 1 |
| document.head | Повертає елемент <head> | 3 |
| document.images | Повертає всі елементи <img> | 1 |
| document.implementation | Повертає реалізацію DOM | 3 |
| document.inputEncoding | Повертає кодування документа (набір символів) | 3 |
| document.lastModified | Повертає дату й час оновлення документа | 3 |
| document.links | Повертає всі елементи <area> та <a>, що мають атрибут href | 1 |
| document.readyState | Повертає статус (завантаження) документа | 3 |
| document.referrer | Повертає URI реферера (документ посилання) | 1 |
| document.scripts | Повертає всі елементи <script> | 3 |
| document.strictErrorChecking | Повертає, якщо перевірка помилок застосована | 3 |
| document.title | Повертає елемент <title> | 1 |
| document.URL | Повертає повну URL-адресу документа | 1 |
