Главная2 курс UX/UI11 занятие. Работа с DOM1. Что такое DOM? Основные методы работы с DOM
11 занятие

1. Что такое DOM? Основные методы работы с DOM

DOM (Document Object Model) - это программный интерфейс для HTML и XML документов. Он представляет структуру документа в виде дерева объектов, где каждый узел является объектом, представляющим часть документа. DOM позволяет JavaScript взаимодействовать с HTML: читать, изменять, добавлять и удалять элементы.

1. Поиск элементов в DOM

getElementById() - поиск по id

// HTML: <div id="header">Заголовок</div>
const header = document.getElementById('header');
console.log(header); // Получим элемент с id="header"

getElementsByClassName() - поиск по классу

// HTML: <div class="item">Пункт 1</div><div class="item">Пункт 2</div>
const items = document.getElementsByClassName('item');
console.log(items); // HTMLCollection элементов с классом "item"
console.log(items[0]); // Первый элемент с классом "item"

getElementsByTagName() - поиск по тегу

// HTML: <p>Параграф 1</p><p>Параграф 2</p>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs); // HTMLCollection всех элементов <p>

querySelector() - поиск с помощью CSS-селектора

// Находит первый элемент, соответствующий селектору
const firstItem = document.querySelector('.item');
const firstLink = document.querySelector('a[target="_blank"]');
const container = document.querySelector('#container .inner');

querySelectorAll() - поиск всех элементов по CSS-селектору

// Находит все элементы, соответствующие селектору
const allItems = document.querySelectorAll('.item');
const allLinks = document.querySelectorAll('nav a');

2. Манипуляция содержимым элементов

textContent и innerText - работа с текстом

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

// Получить текст
const text = element.textContent;

// Установить текст
element.textContent = 'Новый текст';
element.innerText = 'Другой текст'; // Учитывает стили отображения

// Разница между textContent и innerText:
// textContent возвращает весь текст, включая скрытый
// innerText учитывает стили отображения и не возвращает текст скрытых элементов

innerHTML - работа с HTML-содержимым

const container = document.getElementById('container');

// Получить HTML
const html = container.innerHTML; // "<span>Текст</span>"

// Установить HTML
container.innerHTML = '<strong>Жирный текст</strong>';

// Добавить HTML к существующему
container.innerHTML += '<em>Добавленный текст</em>';

outerHTML - получение HTML элемента включая сам элемент

const elem = document.querySelector('.my-class');
console.log(elem.outerHTML); // "<div class='my-class'>Содержимое</div>"

3. Работа с атрибутами и классами

Атрибуты

const link = document.querySelector('a');

// Получить атрибут
const href = link.getAttribute('href');

// Установить атрибут
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');

// Проверить наличие атрибута
const hasClass = link.hasAttribute('class');

// Удалить атрибут
link.removeAttribute('target');

// Получить все атрибуты
const attributes = link.attributes;

Классы

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

// Добавить класс
element.classList.add('new-class', 'another-class');

// Удалить класс
element.classList.remove('old-class');

// Переключить класс (добавить если нет, удалить если есть)
element.classList.toggle('active');

// Проверить наличие класса
const hasClass = element.classList.contains('active');

// Заменить класс
element.classList.replace('old-class', 'new-class');

4. Создание и удаление элементов

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

// Создать новый элемент
const newDiv = document.createElement('div');
const newParagraph = document.createElement('p');

// Добавить содержимое
newDiv.textContent = 'Новый div элемент';
newParagraph.innerHTML = 'Параграф с <strong>жирным</strong> текстом';

// Добавить атрибуты
newDiv.setAttribute('id', 'new-div');
newDiv.className = 'container highlight';

Добавление элементов в DOM

const container = document.getElementById('container');

// append() - добавляет элементы или текст в конец
container.append(newDiv, 'Текст после div');

// appendChild() - добавляет один элемент в конец
container.appendChild(newParagraph);

// prepend() - добавляет элементы или текст в начало
container.prepend('Текст в начале', newDiv.cloneNode());

// insertBefore() - вставляет элемент перед указанным
const referenceElement = document.querySelector('.reference');
container.insertBefore(newDiv, referenceElement);

// insertAdjacentHTML() - вставляет HTML в указанное положение
container.insertAdjacentHTML('beforeend', '<span>В конце</span>');
// Позиции: beforebegin, afterbegin, beforeend, afterend

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

const element = document.getElementById('to-remove');

// Удалить элемент через родителя
element.parentNode.removeChild(element);

// Более современный способ
element.remove();

// Удалить все дочерние элементы
const container = document.getElementById('container');
while (container.firstChild) {
    container.removeChild(container.firstChild);
}
// Или проще:
container.innerHTML = '';

5. Навигация по DOM

const element = document.querySelector('.item');

// Получить родителя
const parent = element.parentNode;

// Получить всех детей
const children = element.childNodes; // Все узлы, включая текстовые
const childrenElements = element.children; // Только элементы

// Получить первого и последнего ребенка
const firstChild = element.firstChild;
const firstElementChild = element.firstElementChild;
const lastChild = element.lastChild;
const lastElementChild = element.lastElementChild;

// Получить соседние элементы
const nextSibling = element.nextSibling;
const nextElementSibling = element.nextElementSibling;
const previousSibling = element.previousSibling;
const previousElementSibling = element.previousElementSibling;

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

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

// Изменить стиль напрямую
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';
element.style.fontSize = '20px';
element.style.display = 'none'; // Скрыть элемент
element.style.display = 'block'; // Показать элемент

// Получить вычисленные стили
const computedStyle = window.getComputedStyle(element);
const color = computedStyle.color;
const width = computedStyle.width;

// Изменить несколько стилей одновременно
Object.assign(element.style, {
    color: 'blue',
    fontSize: '18px',
    margin: '10px'
});
Далее