js查找父節點的簡單方法

2019-11-21 01:42:32

字體：大中小

來源：轉載

供稿：網友

<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，感覺比較巧妙。

上一篇：js禁用和激活input表單的方法

下一篇：一個小型js框架myJSFrame附API使用幫助