如果一个节点做了很多层嵌套，给出其中一个节点，那么如何找出它的父节点呢？又如何找出父节点的父节点呢？
在js原生中提供了一个节点：.parentNode;
而子元素获取父元素仅仅只需要childNode.parentNode;就可以了？
问题是仅仅childNode.parentNode;只能找到子元素的亲身父亲，如果还有其他祖先元素是找不到的哦！
肿么办？
不要忘了，子元素的亲身父亲也是它父亲的子元素哦，那么子元素的亲身父亲的父亲不是又可以使用childNode.parentNode；得到了吗？只不过这里的childNode已不是最开始的那个了，而是它的亲身父亲。所以，这是不是就需要递归了呢？
来来来，一起看看最简单的DOM节点树：
wps8E.tmp.jpeg
是不是更好理解了？
写一个实例来展示一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>
<p><a href=""><span id='spanId'></span></a></p>
</li>
</ul>
</div>
<script type="text/javascript">
function find(dom){
if (dom) {
console.log(dom.parentNode);
find(dom.parentNode);//dom.parentNode作为子元素向上查找它的父元素
}else{
console.log('end');
}
}
find(document.getElementById('spanId'));
</script>
</body>
</html>
·
根据DOM节点树，最高层的节点就是document了，当它作为子节点去查找它的父节点时，显然父节点是不存在的，所以只能返回null了。
看看输出结果吧？（chrome）
QQ图片20170731122838.png
·
其实，还有一个更简单的方法获取一个节点的所有父元素，准确地说是获取它的所有祖先元素。
在jQuery中节点操作提供了一个方法：parents()。
该方法可以直接获取一个元素的所有祖先元素，直到html(html文档显示的最高层节点就是html了，可以写一个html文档确认一下它的结构哦）。
还是以刚才的html文档结构来个实例吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>
<p><a href=""><span>我们</span></a></p>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js">
console.log($("span").parents());
</script>
</body>
</html>
·
结果如下：
QQ图片20170731125416.png
·
哈哈哈，是不是更简单，结果也更清爽？！直接输出所有父节点的TagName。
其实落落也最喜欢这样简洁的啦！
第一种使用递归的方法就是锻炼锻炼编程思维的啦！
网友评论