const el = document.getElementById("div-03");
// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">
// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">
// the closest ancestor which is a div and has a parent article
console.log(el.closest("a > div")); // <div id="div-01">
// the closest ancestor which is not a div
console.log(el.closest("a[href]")); // <a>
<a href="#">
<div id="div-01">
Here is div-01
<div id="div-02">
Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</a>
// Универсальный метод поиска ближайшего родительского элемента с тегом 'a' с использованием цикла while.
// Этот метод работает даже в старых браузерах, которые не поддерживают метод closest.
// Начинаем с выбранного элемента
let element = document.querySelector('your-element-selector');
// Ищем ближайшего родителя с тегом 'a'
while (element) {
// Проверяем, является ли текущий элемент ссылкой
if (element.tagName.toLowerCase() === 'a') {
console.log('Найден ближайший родитель с тегом a:', element);
break;
}
// Переходим к родительскому элементу
element = element.parentElement;
}
// Если мы вышли из цикла без нахождения ссылки
if (!element) {
console.log('Родитель с тегом a не найден.');
}
closest
搜索与选择器匹配的第一个元素如何使用 while 循环找到 DOM 树中标记为“a”的元素的最近父元素?