js查找父节点的简单方法
更新时间：2008年06月28日 00:35:07 作者：
用javascript实现的查找父节点的代码，方法比较不错
<div>
<a href="#">标题</a>
<ul id="demo">
<li><a href="#" onclick="selectThisItem(this)">项目一</a></li>
<ul>
<li><a href="#" onclick="selectThisItem(this)">子类一</a></li>
<li><a href="#" onclick="selectThisItem(this)">子类二</a></li>
</ul>
<li><a href="#" onclick="selectThisItem(this)">项目一</a></li>
<li><a href="#" onclick="selectThisItem(this)">项目</a></li>
</ul>
</div>
上面的代码中，在点击项目或子类时，因为触发的事件一样，参数也一样，能区别用户点击的到底是“项目x”还是“子类x”，除了this.innerHTML来判断它们的内在文字外，还可以根据它们在以<ul id="demo">元素为根节点的xml文档中的纵向位置(节点深度)来区别，比如“项目一”在<ul id="demo">中的节点深度是2，“子类一”的节点深度是4.
计算节点深度在排除递归方法后，找到了一个更为简单的方法：
function parentIndexOf(node,parent){
if(node==parent){return 0;}
for (var i=0,n=node; n=n.parentNode; i++){
if(n==parent){return i;}
if(n==document.documentElement){return -1;} //找不到目标父节点，防止死循环
}
}
函数的返回值是索引数字，如果入口节点与查找的父节点相同（即同一个元素），返回值为0，向上循环找到父节点后返回向上查找的节点级数，如果向上查找，到了整个页面的根节点，比如是<html>，还找不到，就返回-1，并结束循环。
返回值与String对象内置的indexOf方法相似。函数的关键是for的第二个参数n=n.parentNode，感觉比较巧妙。
<a href="#">标题</a>
<ul id="demo">
<li><a href="#" onclick="selectThisItem(this)">项目一</a></li>
<ul>
<li><a href="#" onclick="selectThisItem(this)">子类一</a></li>
<li><a href="#" onclick="selectThisItem(this)">子类二</a></li>
</ul>
<li><a href="#" onclick="selectThisItem(this)">项目一</a></li>
<li><a href="#" onclick="selectThisItem(this)">项目</a></li>
</ul>
</div>
上面的代码中，在点击项目或子类时，因为触发的事件一样，参数也一样，能区别用户点击的到底是“项目x”还是“子类x”，除了this.innerHTML来判断它们的内在文字外，还可以根据它们在以<ul id="demo">元素为根节点的xml文档中的纵向位置(节点深度)来区别，比如“项目一”在<ul id="demo">中的节点深度是2，“子类一”的节点深度是4.
计算节点深度在排除递归方法后，找到了一个更为简单的方法：
function parentIndexOf(node,parent){
if(node==parent){return 0;}
for (var i=0,n=node; n=n.parentNode; i++){
if(n==parent){return i;}
if(n==document.documentElement){return -1;} //找不到目标父节点，防止死循环
}
}
函数的返回值是索引数字，如果入口节点与查找的父节点相同（即同一个元素），返回值为0，向上循环找到父节点后返回向上查找的节点级数，如果向上查找，到了整个页面的根节点，比如是<html>，还找不到，就返回-1，并结束循环。
返回值与String对象内置的indexOf方法相似。函数的关键是for的第二个参数n=n.parentNode，感觉比较巧妙。
相关文章
这篇文章主要介绍了使用js做的一个简单的弹出框且有关闭按钮,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了JS 拦截全局ajax请求实例解析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了详解如何使用微信小程序云函数发送短信验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03![attachEvent的使用方法与传递参数[IE|firefox]](//img.jbzj.com/images/xgimg/bcimg3.png)
attachEvent的使用方法与传递参数[IE|firefox]
attachEvent的使用方法与传递参数[IE|firefox]...2007-05-05
在前台开发中会涉及页面跳转的问题,下面这篇文章主要给大家总结介绍了关于JavaScript实现页面跳转的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
本文主要介绍了ES6的内置对象扩展实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了基于javascript处理nginx请求过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
闭包机制是JavaScript的重点和难点，本文希望能帮助大家轻松的学习闭包。下面跟着小编一起来看下吧2017-03-03
js Element Traversal规范中的元素遍历方法
对于元素间的空格，在IE9之前，都不会返回文档节点，其它的所有浏览器都会返回文档节点,为了兼容浏览器这间的差异，又不更改已有的DOM 标准，所以有了 Element Traversal 规范2018-04-04
这篇文章主要为大家详细介绍了微信小程序实现带放大效果的轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
![attachEvent的使用方法与传递参数[IE|firefox]](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论