查找html 元素的父元素,利用递归找出一个元素所有的父节点

如果一个节点做了很多层嵌套，给出其中一个节点，那么如何找出它的父节点呢？又如何找出父节点的父节点呢？

在js原生中提供了一个节点：.parentNode;

而子元素获取父元素仅仅只需要childNode.parentNode;就可以了？

问题是仅仅childNode.parentNode;只能找到子元素的亲身父亲，如果还有其他祖先元素是找不到的哦！

肿么办？

不要忘了，子元素的亲身父亲也是它父亲的子元素哦，那么子元素的亲身父亲的父亲不是又可以使用childNode.parentNode；得到了吗？只不过这里的childNode已不是最开始的那个了，而是它的亲身父亲。所以，这是不是就需要递归了呢？

来来来，一起看看最简单的DOM节点树：

wps8E.tmp.jpeg

是不是更好理解了？

写一个实例来展示一下：

Document

function find(dom){

if (dom) {

console.log(dom.parentNode);

find(dom.parentNode);//dom.parentNode作为子元素向上查找它的父元素

}else{

console.log('end');

}

}

find(document.getElementById('spanId'));

·

根据DOM节点树，最高层的节点就是document了，当它作为子节点去查找它的父节点时，显然父节点是不存在的，所以只能返回null了。

看看输出结果吧？(chrome)

QQ图片20170731122838.png

·

其实，还有一个更简单的方法获取一个节点的所有父元素，准确地说是获取它的所有祖先元素。

在jQuery中节点操作提供了一个方法：parents()。

该方法可以直接获取一个元素的所有祖先元素，直到html(html文档显示的最高层节点就是html了，可以写一个html文档确认一下它的结构哦)。

还是以刚才的html文档结构来个实例吧：

Document

• 我们

console.log($("span").parents());

·

结果如下：

QQ图片20170731125416.png

·

哈哈哈，是不是更简单，结果也更清爽？！直接输出所有父节点的TagName。

其实落落也最喜欢这样简洁的啦！

第一种使用递归的方法就是锻炼锻炼编程思维的啦！