Шпаргалка по DOM API: методы и свойства, которые нужны каждый день

Собрал в одном месте ключевые DOM-методы и свойства, которые покрывают 90% задач в браузерном JS.

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

• document.querySelector(selector) — первый элемент, подходящий под CSS-селектор
• document.querySelectorAll(selector) — все подходящие элементы (NodeList)
• document.getElementById(id) — по идентификатору
• document.getElementsByClassName(name) — по классу
• document.getElementsByTagName(tag) — по тегу

Работа с содержимым

• element.textContent — текстовое содержимое (без HTML)
• element.innerHTML — содержимое как HTML-строка
• element.innerText — видимый текст с учётом стилей

Атрибуты

• element.getAttribute(name) — получить значение атрибута
• element.setAttribute(name, value) — установить атрибут
• element.removeAttribute(name) — удалить атрибут
• element.hasAttribute(name) — проверить наличие атрибута

Классы

• element.classList.add(cls) — добавить класс
• element.classList.remove(cls) — убрать класс
• element.classList.toggle(cls) — переключить класс
• element.classList.contains(cls) — проверить наличие класса

События

• element.addEventListener(event, handler) — подписаться на событие
• element.removeEventListener(event, handler) — отписаться
• event.preventDefault() — отменить дефолтное поведение
• event.stopPropagation() — остановить всплытие

Управление структурой документа

• document.createElement(tag) — создать новый элемент
• parent.appendChild(child) — добавить дочерний элемент в конец
• parent.insertBefore(newEl, refEl) — вставить перед указанным элементом
• element.remove() — удалить элемент из DOM
• parent.replaceChild(newEl, oldEl) — заменить дочерний элемент
• element.cloneNode(deep) — клонировать элемент (с потомками или без)

Навигация по дереву

• element.parentNode — родительский узел
• element.children — дочерние элементы (HTMLCollection)
• element.firstElementChild / element.lastElementChild — первый/последний дочерний элемент
• element.nextElementSibling / element.previousElementSibling — соседние элементы

Вот и весь базовый набор — держи под рукой и не трать время на поиск синтаксиса по мелочам 🦆