Для манипуляции HTML-элементами в JavaScript предпочтительно использовать методы
Помимо поиска элементов, класс
Старые методы поиска элементов, такие как
Перемещение по DOM относительно элемента можно выполнить через свойства, такие как
querySelector()
и querySelectorAll()
. Они принимают CSS-селекторы, что упрощает работу для фронтенд-разработчиков. Метод querySelector()
возвращает первый подходящий элемент или null
, в то время как querySelectorAll()
возвращает NodeList
со всеми подходящими элементами или пустой NodeList
, если совпадений нет. Изображение носит иллюстративный характер
Помимо поиска элементов, класс
Element
имеет полезный метод matches()
, который проверяет соответствие элемента заданному селектору. Для поиска родительских элементов существует метод closest()
, который также принимает селектор и возвращает ближайший родительский элемент, соответствующий этому селектору. Старые методы поиска элементов, такие как
getElementById()
, getElementsByTagName()
, getElementsByName()
, и getElementsByClassName()
, могут создавать путаницу из-за их различий в поведении. Они возвращают NodeList
или HTMLCollection
(кроме getElementById()
, который возвращает элемент), которые могут быть активными, меняя свою длину при изменении DOM. Эти методы лучше избегать, чтобы упростить код. Перемещение по DOM относительно элемента можно выполнить через свойства, такие как
parentNode
, children
, firstElementChild
, lastElementChild
, nextElementSibling
и previousElementSibling
. Эти свойства игнорируют текстовые узлы и комментарии, что позволяет сосредоточиться на HTML-структуре. Свойство childElementCount
позволяет узнать количество дочерних элементов.