DOM 腳本編程中的兄弟節(jié)點(diǎn)
更新時(shí)間:2009年10月31日 23:18:15 作者:
兄弟節(jié)點(diǎn)之間可以通過 previousSibling 和 nextSibling 屬性訪問同一級別上的不同子節(jié)點(diǎn)。這個兄弟節(jié)點(diǎn)是元素還是文本節(jié)點(diǎn)在現(xiàn)代瀏覽器上運(yùn)行是怎么樣的呢?
除IE外的瀏覽器是將換行符作為內(nèi)容的文本節(jié)點(diǎn)(nodeType為3)。而元素的話,nodeType為1。下面是查找它們的實(shí)用方法:
lastSibling:function(node){
var tempObj = node.parentNode.lastChild;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
{
tempObj=tempObj.previousSibling;
}
return (tempObj.nodeType==1)?tempObj:false;
}
這是《深入淺出JavaScript》書中DOMhelp庫中l(wèi)astSibling方法的源碼。與 mootools 庫中實(shí)現(xiàn)源碼差不多:
'last-child': function(){
var element = this;
while ((element = element.nextSibling)){
if (element.nodeType == 1) return false;
}
return true;
}
這是在 Mootools 1.2.4 源碼中的 last-child() 方法。
復(fù)制代碼 代碼如下:
lastSibling:function(node){
var tempObj = node.parentNode.lastChild;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
{
tempObj=tempObj.previousSibling;
}
return (tempObj.nodeType==1)?tempObj:false;
}
這是《深入淺出JavaScript》書中DOMhelp庫中l(wèi)astSibling方法的源碼。與 mootools 庫中實(shí)現(xiàn)源碼差不多:
復(fù)制代碼 代碼如下:
'last-child': function(){
var element = this;
while ((element = element.nextSibling)){
if (element.nodeType == 1) return false;
}
return true;
}
這是在 Mootools 1.2.4 源碼中的 last-child() 方法。
您可能感興趣的文章:
- javascript獲取dom的下一個節(jié)點(diǎn)方法
- JavaScript DOM節(jié)點(diǎn)添加示例
- javascript 獲取HTML DOM父、子、臨近節(jié)點(diǎn)
- html dom節(jié)點(diǎn)操作(獲取/修改/添加或刪除)
- js和jquery對dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- JS構(gòu)建頁面的DOM節(jié)點(diǎn)結(jié)構(gòu)的實(shí)現(xiàn)代碼
- DOM下的節(jié)點(diǎn)屬性和操作小結(jié)
- DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法實(shí)例
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較【冒泡、選擇、插入排序】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較,結(jié)合實(shí)例形式詳細(xì)總結(jié)分析了javascript排序算法中的冒泡、選擇、插入等排序算法原理與操作技巧,需要的朋友可以參考下2019-02-02JavaScript手寫源碼之omit函數(shù)的實(shí)現(xiàn)
最近突然有個新的想法,想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了,那就實(shí)現(xiàn)一個omit函數(shù)吧2023-02-02JS偽繼承prototype實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS偽繼承prototype實(shí)現(xiàn)方法,結(jié)合實(shí)例形式對比分析了基于prototype實(shí)現(xiàn)模擬繼承的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06微信小程序?qū)崿F(xiàn)側(cè)邊欄二級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊欄二級聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07js模擬淘寶網(wǎng)的多級選擇菜單實(shí)現(xiàn)方法
這篇文章主要介紹了js模擬淘寶網(wǎng)的多級選擇菜單實(shí)現(xiàn)方法,涉及javascript針對頁面元素結(jié)點(diǎn)的遍歷與設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08JavaScript數(shù)據(jù)類型學(xué)習(xí)筆記分享
這篇文章主要為大家分享了JavaScript數(shù)據(jù)類型學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09createObjectURL方法實(shí)現(xiàn)本地圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了createObjectURL方法實(shí)現(xiàn)本地圖片預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09