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 дозволяє відслідковувати та реагувати на ці події, роблячи вашу веб-сторінку інтерактивною.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

undefined

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

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

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

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

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

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

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