run-dev

HTML Document в JavaScript: работа с HTML-документом в JS

В JavaScript объект document представляет собой точку входа к содержимому веб-страницы. Он позволяет получать доступ к элементам HTML-документа, изменять их, добавлять новые элементы и реагировать на события. Объект document является частью глобального объекта window и реализует интерфейс HTMLDocument.

Доступ к документу

Объект document становится доступным сразу после загрузки страницы. С его помощью можно получить всю структуру HTML, включая элементы, атрибуты, текст и мета-данные:

console.log(document.title); // Заголовок текущей страницы
console.log(document.URL);   // URL текущей страницы

Поиск элементов в документе

Поиск по id

const element = document.getElementById('header');

Поиск по имени тега

const paragraphs = document.getElementsByTagName('p');

Поиск по имени класса

const buttons = document.getElementsByClassName('btn');

Поиск с querySelector

const firstButton = document.querySelector('.btn');
const allButtons = document.querySelectorAll('.btn');

Изменение содержимого элементов

Текстовое содержимое

const heading = document.getElementById('header');
heading.textContent = 'Новый заголовок';

Внутренний HTML-код

const content = document.getElementById('content');
content.innerHTML = '<strong>Живой контент</strong>';

Изменение атрибутов

const link = document.querySelector('a');
link.href = 'https://example.com';
link.setAttribute('target', '_blank');

Создание и добавление новых элементов

const newParagraph = document.createElement('p');
newParagraph.textContent = 'Созданный абзац';
document.body.appendChild(newParagraph);

Удаление элементов

const element = document.getElementById('header');
element.remove();

Работа со стилями

const box = document.getElementById('box');
box.style.backgroundColor = 'lightblue';
box.style.padding = '10px';

Работа с классами

const button = document.querySelector('.btn');
button.classList.add('active');
button.classList.remove('hidden');
button.classList.toggle('highlight');

Обработка событий документа

Событие загрузки документа

document.addEventListener('DOMContentLoaded', () => {
    console.log('Документ полностью загружен');
});

Событие прокрутки

document.addEventListener('scroll', () => {
    console.log('Страница прокручивается');
});

Объект document в JavaScript — это центральная точка работы с HTML-документом. С его помощью можно динамически изменять содержимое страницы, реагировать на действия пользователя и полностью управлять DOM-структурой, создавая интерактивные веб-приложения.

Больше записей