如何递归搜索所有parentNode

Question

我想知道，如何递归地找出一个元素的所有父节点。 假设我有以下片段

<a href="#"><font>Hello</font></a>

在这里我想知道字体标签的父节点是否是锚标签。 现在，只需检查 .parentNode 属性即可实现此目的。但如果有以下情况怎么办，

<a href="#"><font><b>Hello<b></font></a>

或

<a href="#"><font><b><u>Hello</u><b></font></a>

那么，基本上，如何知道我们是否已经到达最顶层的父节点？

Answer 1

您可以从一个元素向上遍历到根查找所需的标签：

function findUpTag(el, tag) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el.tagName === tag)
            return el;
    }
    return null;
}

您可以使用开始元素调用此方法：

var el = document.getElementById("...");  // start element
var a = findUpTag(el, "A");   // search <a ...>
if (a) console.log(a.id);

Answer 2

以下递归函数将返回一个 升序有序数组，其中包含所提供的 DOM 元素的所有父节点，直到到达 BODY 节点。

function parents(element, _array) {
    if(_array === undefined) _array = []; // initial call
    else _array.push(element); // add current element
    // do recursion until BODY is reached
    if(element.tagName !== 'BODY' ) return parents(element.parentNode, _array);
    else return _array;
}

用途：

var parentsArray = parents( document.getElementById("myDiv") );

Answer 3

您可以使用 jQuery Closest() 方法来获取最接近的 ahref:

$("#your-element").closest("a").css("color", "red");

或者你可以看看 parentsUntil 方法：

$("#your-element").parentsUntil("#yourWrapper", "a").first().css("color", "red");

在这里尝试一下：http://www.lunarailways.com/demos/parents.html

Answer 4

我一直在做类似的事情。如果用户在 div 外部单击，则尝试关闭 div。它需要循环遍历其所有父节点。

看看这个： http://jsfiddle.net/aamir/y7mEY/

Answer 5

这是一个较短的：

function parentByTag(el, tag) {
    if(!el || el.tagName == tag) {
        return el
    } else {
        return parentByTag(el.parentElement, tag)
    }
}

如果没有找到则返回

undefined

。

Answer 6

从2015年左右开始，就可以使用

Element.closest()

const startElement = document.getElementBy...
if (startElement.closest("a") != null) { 
    // Has <a> tag ancestor.
}

（我意识到这是一个老问题，但它仍然出现在 Google 中（例如“javascript 查找父元素递归”），而且我很惊讶这里没有看到更现代的答案。）