本文介绍了一种通过遍历 parentNode 属性来计算 DOM 节点深度的简洁方法。通过 parentIndexOf 函数，可判断当前节点与指定父节点的层级关系，返回相对索引值。该方法避免了递归调用，适用于需要区分嵌套结构中不同层级元素点击事件的场景。
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>
在上述 HTML 结构中，点击项目或子类时触发相同的事件处理函数，且传入的参数均为 this。为了区分用户点击的是“项目x”还是“子类x”，除了通过 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==parent){return i;}
if(n==document.documentElement){return -1;} //找不到目标父节点，防止死循环
}
}
该函数的返回值是一个索引数字。如果入口节点与查找的父节点相同（即同一个元素），则返回 0；若向上循环查找至目标父节点，则返回向上查找的层级数；若一直查找到整个页面的根节点（如 <html>）仍未找到目标，则返回 -1 并结束循环。
此返回值的行为与 String 对象内置的 indexOf 方法相似。该函数的核心技巧在于 for 循环的第二个参数 n=n.parentNode，这种写法较为巧妙。