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

Синтаксис

undefined

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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

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

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

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