JavaScript中利用parentNode查找父节点索引的简便方法
本文介绍了一种在JavaScript中通过遍历parentNode属性来计算节点深度的方法。相比递归，该方法利用for循环的初始化表达式n=n.parentNode向上查找，实现了类似String.indexOf的功能。函数返回节点间的层级索引，若找到目标父节点则返回相对级数，若遍历至document.documentElement仍未找到则返回-1，有效避免了死循环并简化了DOM结构判断逻辑。
HTML结构示例
<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">为根节点的文档树中的纵向位置（即节点深度）进行区分。例如，“项目一”相对于<ul id="demo">的节点深度为2，而“子类一”的深度为4。
在排除递归方法后，发现了一种更为简单的计算节点深度的方式。
parentIndexOf函数实现
function parentIndexOf(node,parent){
if(node==parent){return 0;}
for (var i=0,n=node; n=n.parentNode; i++){
if(n==p){return i;}
if(n==document.documentElement){return -1;} //找不到目标父节点，防止死循环
}
}
该函数的返回值是一个索引数字。当入口节点与指定的父节点相同时（即同一元素），返回值为0。通过向上循环查找父节点，一旦找到匹配的父节点，则返回向上查找的节点级数。如果在向上查找过程中到达整个页面的根节点（如<html>）仍未找到目标，则返回-1并结束循环，以此防止死循环。
此返回值的表现与String对象内置的indexOf方法相似。该函数的核心技巧在于for循环的第二个参数n=n.parentNode，这种写法较为巧妙。
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01