js查找父節(jié)點的簡單方法
更新時間：2008年06月28日 00:35:07 作者：
用javascript實現(xiàn)的查找父節(jié)點的代碼，方法比較不錯
<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>
上面的代碼中，在點擊項目或子類時，因為觸發(fā)的事件一樣，參數(shù)也一樣，能區(qū)別用戶點擊的到底是“項目x”還是“子類x”，除了this.innerHTML來判斷它們的內(nèi)在文字外，還可以根據(jù)它們在以<ul id="demo">元素為根節(jié)點的xml文檔中的縱向位置(節(jié)點深度)來區(qū)別，比如“項目一”在<ul id="demo">中的節(jié)點深度是2，“子類一”的節(jié)點深度是4.
計算節(jié)點深度在排除遞歸方法后，找到了一個更為簡單的方法：
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;} //找不到目標父節(jié)點，防止死循環(huán)
}
}
函數(shù)的返回值是索引數(shù)字，如果入口節(jié)點與查找的父節(jié)點相同（即同一個元素），返回值為0，向上循環(huán)找到父節(jié)點后返回向上查找的節(jié)點級數(shù)，如果向上查找，到了整個頁面的根節(jié)點，比如是<html>，還找不到，就返回-1，并結(jié)束循環(huán)。
返回值與String對象內(nèi)置的indexOf方法相似。函數(shù)的關(guān)鍵是for的第二個參數(shù)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>
上面的代碼中，在點擊項目或子類時，因為觸發(fā)的事件一樣，參數(shù)也一樣，能區(qū)別用戶點擊的到底是“項目x”還是“子類x”，除了this.innerHTML來判斷它們的內(nèi)在文字外，還可以根據(jù)它們在以<ul id="demo">元素為根節(jié)點的xml文檔中的縱向位置(節(jié)點深度)來區(qū)別，比如“項目一”在<ul id="demo">中的節(jié)點深度是2，“子類一”的節(jié)點深度是4.
計算節(jié)點深度在排除遞歸方法后，找到了一個更為簡單的方法：
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;} //找不到目標父節(jié)點，防止死循環(huán)
}
}
函數(shù)的返回值是索引數(shù)字，如果入口節(jié)點與查找的父節(jié)點相同（即同一個元素），返回值為0，向上循環(huán)找到父節(jié)點后返回向上查找的節(jié)點級數(shù)，如果向上查找，到了整個頁面的根節(jié)點，比如是<html>，還找不到，就返回-1，并結(jié)束循環(huán)。
返回值與String對象內(nèi)置的indexOf方法相似。函數(shù)的關(guān)鍵是for的第二個參數(shù)n=n.parentNode，感覺比較巧妙。
您可能感興趣的文章:
- JS 使用for循環(huán)遍歷子節(jié)點查找元素
- javascript下查找父節(jié)點的簡單方法
- js查找節(jié)點的方法小結(jié)
- JS常見DOM節(jié)點操作示例【創(chuàng)建 ，插入，刪除，復制，查找】
- javascript基礎(chǔ)之查找元素的詳細介紹(訪問節(jié)點)
- js遍歷子節(jié)點子元素附屬性及方法
- javascript 節(jié)點遍歷函數(shù)
- JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法實例總結(jié)
- javascript獲取網(wǎng)頁中指定節(jié)點的父節(jié)點、子節(jié)點的方法小結(jié)
- javascript得到XML某節(jié)點的子節(jié)點個數(shù)的腳本
- JS查找孩子節(jié)點簡單示例
相關(guān)文章
這篇文章主要介紹了使用js做的一個簡單的彈出框且有關(guān)閉按鈕,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS 攔截全局ajax請求實例解析的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
詳解如何使用微信小程序云函數(shù)發(fā)送短信驗證碼
這篇文章主要介紹了詳解如何使用微信小程序云函數(shù)發(fā)送短信驗證碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03![attachEvent的使用方法與傳遞參數(shù)[IE|firefox]](http://img.jbzj.com/images/xgimg/bcimg3.png)
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]...2007-05-05
JavaScript實現(xiàn)頁面跳轉(zhuǎn)的5種方法總結(jié)
在前臺開發(fā)中會涉及頁面跳轉(zhuǎn)的問題,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript實現(xiàn)頁面跳轉(zhuǎn)的5種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
本文主要介紹了ES6的內(nèi)置對象擴展實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了基于javascript處理nginx請求過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
閉包機制是JavaScript的重點和難點，本文希望能幫助大家輕松的學習閉包。下面跟著小編一起來看下吧2017-03-03
js Element Traversal規(guī)范中的元素遍歷方法
對于元素間的空格，在IE9之前，都不會返回文檔節(jié)點，其它的所有瀏覽器都會返回文檔節(jié)點,為了兼容瀏覽器這間的差異，又不更改已有的DOM 標準，所以有了 Element Traversal 規(guī)范2018-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05