Closest JS - ближайший элемент в DOM-дереве с помощью JavaScript

В JavaScript есть несколько способов найти ближайший элемент на странице. Один из наиболее часто используемых методов - использование методов DOM API.

С помощью метода closest() можно получить ближайший родительский элемент, соответствующий указанному CSS-селектору. Кроме того, данный метод ищет элементы вверх по DOM-дереву, поэтому ближайший элемент всегда будет родительским.

Пример использования метода closest():

html

  

    text
  

javascript
const child = document.querySelector('.child');
const parent = child.closest('.parent');
console.log(parent); // 

Также существует метод nextElementSibling и previousElementSibling, который позволяет находить ближайшего соседа в DOM-дереве. Эти методы можно использовать для нахождения следующего или предыдущего элемента от текущего.

Пример использования методов nextElementSibling и previousElementSibling():

html

javascript
const second = document.querySelector('.second');
const first = second.previousElementSibling;
const third = second.nextElementSibling;
console.log(first); // 

console.log(third); // 

Кроме того, можно использовать метод querySelectorAll() для поиска всех элементов с заданным CSS-селектором, а затем находить ближайший элемент с помощью рабочих действий его массива.

Пример использования метода querySelectorAll():

html

  

  

javascript
const children = document.querySelectorAll('.child');
const parent = children[0].parentNode;
console.log(parent); // 

Также можно использовать методы Element.getBoundingClientRect() и ElementFromPoint() для нахождения ближайших элементов на странице по координатам.

Пример использования методов getBoundingClientRect() и elementFromPoint():

html

  

javascript
const child = document.querySelector('.child');
const rect = child.getBoundingClientRect();
const pointElement = document.elementFromPoint(rect.left, rect.top);
console.log(pointElement); //