СПРАВОЧНИК
DOM API в JavaScript
Поиск, изменение и события элементов
DOM (Document Object Model) — это объектная модель документа, которая представляет HTML-страницу в виде дерева узлов. Через DOM API на JavaScript можно находить элементы, менять их содержимое и атрибуты, создавать и удалять узлы, навешивать обработчики событий и управлять стилями. В этом справочнике собраны самые востребованные методы и свойства с короткими рабочими примерами.
Атрибуты и классы 9
classList.add()
element.classList.add(...classes)Добавляет один или несколько CSS-классов элементу.classList.contains()
element.classList.contains(class)Проверяет, есть ли у элемента указанный класс. Возвращает true или false.classList.remove()
element.classList.remove(...classes)Удаляет один или несколько CSS-классов у элемента.classList.toggle()
element.classList.toggle(class, force)Переключает класс: добавляет, если его нет, и убирает, если есть.dataset
element.datasetДоступ к data-атрибутам элемента как к объекту.getAttribute()
element.getAttribute(name)Возвращает значение HTML-атрибута по имени или null.hasAttribute()
element.hasAttribute(name)Проверяет, есть ли у элемента указанный атрибут. Возвращает true или false.removeAttribute()
element.removeAttribute(name)Полностью удаляет атрибут с элемента.setAttribute()
element.setAttribute(name, value)Устанавливает или меняет значение атрибута элемента.Изменение содержимого 4
innerHTML
element.innerHTMLЧитает или задаёт HTML-разметку внутри элемента.innerText
element.innerTextЧитает или задаёт видимый текст элемента с учётом стилей.textContent
element.textContentЧитает или задаёт текстовое содержимое узла без разбора HTML.value
element.valueЧитает или задаёт текущее значение поля ввода, textarea или select.Навигация по дереву 6
children
element.childrenЖивая HTMLCollection дочерних элементов (без текстовых узлов).firstElementChild
element.firstElementChildПервый дочерний элемент или null.lastElementChild
element.lastElementChildПоследний дочерний элемент или null.nextElementSibling
element.nextElementSiblingСледующий элемент-сосед на том же уровне или null.parentNode
node.parentNodeСсылка на родительский узел текущего узла.previousElementSibling
element.previousElementSiblingПредыдущий элемент-сосед на том же уровне или null.Поиск элементов 7
closest()
element.closest(selector)Ищет ближайшего предка (включая сам элемент), подходящего под селектор.getElementById()
document.getElementById(id)Находит один элемент по значению атрибута id. Возвращает элемент или null.getElementsByClassName()
element.getElementsByClassName(className)Возвращает живую HTMLCollection всех элементов с указанным классом.getElementsByTagName()
element.getElementsByTagName(tagName)Возвращает живую HTMLCollection всех элементов с указанным тегом.matches()
element.matches(selector)Проверяет, подходит ли элемент под CSS-селектор. Возвращает true или false.querySelector()
element.querySelector(selector)Возвращает первый элемент, подходящий под CSS-селектор, или null.querySelectorAll()
element.querySelectorAll(selector)Возвращает статический NodeList всех элементов, подходящих под селектор.События 6
addEventListener()
target.addEventListener(type, handler, options)Подписывает обработчик на событие указанного типа.dispatchEvent()
target.dispatchEvent(event)Программно инициирует событие на элементе.event.preventDefault()
event.preventDefault()Отменяет стандартное действие браузера для события.event.stopPropagation()
event.stopPropagation()Останавливает дальнейшее всплытие события вверх по дереву.event.target
event.targetСсылка на элемент, на котором изначально произошло событие.removeEventListener()
target.removeEventListener(type, handler)Отписывает ранее назначенный обработчик события.Создание и вставка 9
append()
parent.append(...nodes)Добавляет в конец родителя несколько узлов и/или строк текста.appendChild()
parent.appendChild(node)Добавляет узел последним потомком родителя. Возвращает добавленный узел.cloneNode()
element.cloneNode(deep)Создаёт копию узла. С аргументом true копирует и всех потомков.createElement()
document.createElement(tagName)Создаёт новый элемент указанного типа (пока вне документа).insertBefore()
parent.insertBefore(newNode, refNode)Вставляет новый узел перед указанным существующим потомком.prepend()
parent.prepend(...nodes)Вставляет узлы и/или строки в начало родителя.remove()
element.remove()Удаляет сам элемент из документа.removeChild()
parent.removeChild(node)Удаляет указанный дочерний узел. Возвращает удалённый узел.replaceWith()
element.replaceWith(...nodes)Заменяет элемент в DOM на другие узлы и/или строки.