css.in.ua
Підтримати

JS властивість Object.document

Загальний опис

Об'єкт Document є ключовим елементом Document Object Model (DOM), який представляє документ у веб-браузері. Цей об'єкт надає інтерфейс для роботи зі структурою, стилем і вмістом веб-сторінки. Document містить методи та властивості, які дозволяють доступ та маніпулювання елементами сторінки, включаючи створення нових елементів, пошук існуючих, зміну їх вмісту та властивостей.

Використання Document

  1. Доступ до елементів: Одним із основних застосувань Document є вибір елементів на сторінці. Методи, такі як getElementById(), getElementsByClassName(), getElementsByTagName() та новітні querySelector() та querySelectorAll(), дозволяють вибирати елементи за їхнім ідентифікатором, класом, тегом або за селектором CSS відповідно.

     let elementById = document.getElementById("myElement");
 let elementsByClass = document.getElementsByClassName("myClass");
 let elementsByTag = document.getElementsByTagName("p");
 let elementQuery = document.querySelector(".myClass");
 let elementsQueryAll = document.querySelectorAll("div.myClass");

    У цьому прикладі показано, як можна використовувати різні методи для вибору елементів на сторінці.

  2. Маніпуляція елементами: Після вибору елементів, Document дозволяє маніпулювати ними. Можна змінювати вміст, стилі, атрибути та інші властивості елементів.

     let myElement = document.getElementById("myElement");
 myElement.textContent = "Новий текст";
 myElement.style.color = "blue";
 myElement.setAttribute("data-custom", "value");

    У цьому прикладі виконується зміна тексту, кольору та додавання нового атрибуту до елемента.

  3. Створення нових елементів: Метод createElement() дозволяє створювати нові елементи, які можуть бути додані на сторінку.

     let newElement = document.createElement("div");
 newElement.textContent = "Це новий елемент";
 document.body.appendChild(newElement);

    У цьому прикладі створюється новий div елемент, який потім додається до тіла документа.

  4. Взаємодія з подіями: Document також використовується для роботи з подіями, наприклад, для встановлення обробників подій на елементах.

     document.getElementById("myButton").addEventListener("click", function() {
     alert("Кнопка натиснута");
 });

    У цьому прикладі до кнопки з ідентифікатором myButton додається обробник події click.

  5. Робота з CSS та класами: Методи classList.add(), classList.remove() та classList.toggle() дозволяють управляти класами елементів для зміни їхнього стилю.

     let myElement = document.getElementById("myElement");
 myElement.classList.add("newClass");
 myElement.classList.remove("oldClass");
 myElement.classList.toggle("active");

    Тут показано, як можна додавати, видаляти та перемикати класи елементів.

  6. Динамічна зміна документа: Document дозволяє динамічно змінювати структуру HTML-документа, включаючи додавання або видалення елементів, зміну вмісту та інше.

     let newParagraph = document.createElement("p");
 newParagraph.textContent = "Це новий абзац";
 document.body.appendChild(newParagraph);

 document.getElementById("removeElement").remove();

    У цьому прикладі створюється новий абзац, а потім видаляється інший елемент.

Використовуючи об'єкт Document, розробники мають можливість створювати динамічні, інтерактивні веб-сторінки. Через великий набір інструментів для маніпуляції елементами, Document є незамінним у будь-якому веб-проекті, дозволяючи реалізувати різноманітні функціональні можливості та забезпечувати користувачам багатий досвід взаємодії з сайтом.

Порада:

Document дає можливість реєструвати обробники подій для реагування на дії користувача, такі як кліки або натискання клавіш. Наприклад, використання addEventListener дозволяє відслідковувати та реагувати на ці події, роблячи вашу веб-сторінку інтерактивною.
Порада:

За допомогою Document, можна створювати нові елементи DOM та додавати їх на сторінку. Методи, такі як createElement, дозволяють динамічно додавати новий контент, що є особливо корисним у односторінкових застосунках (SPA) або при реалізації динамічного оновлення вмісту.
Порада:

У складних веб-додатках Document відіграє ключову роль у створенні та управлінні веб-інтерфейсом. Важливо розуміти, як взаємодіяти з DOM через Document, щоб ефективно управляти елементами сторінки, а також для підтримки високої продуктивності та оптимізації взаємодії з користувачем.

Синтаксис

undefined

Значення

Return

Переглядачі

Переглядач

1

1

1

3

12
Переглядач

37

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі, користувачі можуть використовувати кнопку "Додати елемент", щоб створити новий абзац у вмістовому блоці. Друга кнопка "Змінити колір" дозволяє змінити колір тексту у вмістовому блоці. Це демонструє використання методів createElement, appendChild та маніпуляцію стилем елементів через об'єкт Document.

У цьому прикладі ми використовуємо об'єкт document для отримання та зміни заголовка веб-сторінки. Це базове застосування document, яке демонструє, як можна читати та міняти динамічно вміст сторінки.

// Отримання поточного заголовка сторінки
let currentTitle = document.title;
console.log("Поточний заголовок: ", currentTitle);

// Зміна заголовка сторінки
document.title = "Новий заголовок сторінки";

У цьому складнішому прикладі ми створюємо новий елемент div та додаємо його до DOM за допомогою document.createElement() і document.body.appendChild(). Такий підхід часто використовується для динамічної модифікації веб-сторінок.

// Створення нового елемента div
let newDiv = document.createElement("div");

// Додавання тексту до нового div
newDiv.textContent = "Це новий елемент div";

// Стилізація div
newDiv.style.color = "blue";
newDiv.style.fontSize = "20px";

// Додавання div до тіла документа
document.body.appendChild(newDiv);

Спільнота

Зв'язок