首頁 web前端 js教程 高效率的取得目前元素是父元素的第幾個子元素_javascript技巧

高效率的取得目前元素是父元素的第幾個子元素_javascript技巧

May 16, 2016 pm 05:19 PM
子元素 父元素

例如處理事件的時候,有時候需要知道目前點擊的是第幾個子節點,而HTML DOM本身並沒有直接提供對應的屬性,需要自己來計算。

從一個索引序號,很容易得到該索引對應的子節點或子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行。

但反過來,已知一個節點或元素對象,要知道它的索引序號則沒有那麼直接了。

一些特殊的元素,HTML DOM有對應的屬性表示其索引序號,主要是表格的TD 和 TR 元素。

表格儲存格TD元素有 cellIndex 屬性。

表格行TR元素有rowIndex屬性。

如果你的處理目標剛好就是表格,則優先使用這兩個屬性。

但一般的節點或元素並沒有 childNodeIndex 或 childElementIndex 之類的屬性。

解決方案主要分為兩類:

一、預先計算並快取節點的索引號(可以存在節點屬性或js變數中)。

二、即時計算,需要遍歷部分節點。

應用中,可依不同的實際情況,選用上述兩類方案之一。

適用方案一的情形:

當DOM結構不會變化,並且需要頻繁的獲取個別節點的索引,可採用方案一。

優點是後續讀取快,缺點是初始化需要開銷,DOM結構變化後需要重新初始化。

適用方案二的情形:

DOM結構可能會變化,並且不是特別頻繁的獲取個別節點的索引,可採用方案二。

優點是不受DOM結構變化的影響,不會污染DOM結構,沒有初始化開銷。缺點是不適合高頻率呼叫。

一般而言,採用方案二是更好的,因為通常DOM樹規模是比較有限的,一輪的循環並不會導致顯著降低整體性能,而其優點則是顯著的。

對於IE瀏覽器,則有更直接的方法。

從IE4到IE11,都有sourceIndex屬性,這個屬性表示了元素在DOM樹的順序,比較元素和父元素的sourceIndex的差就很容易知道元素是第幾個子元素了。

我寫了一段函數來區分處理,在IE下採用sourceIndex高效判斷,非IE則採用一般遍歷。

複製程式碼 程式碼如下:

function getChildrenIndex( is simplest and fastest
if(ele.sourceIndex){
return ele.sourceIndex - ele.parentNode.sourceIndex - 1;
}
//other browsers
var i=0 var i=0
while(ele = ele.previousElementSibling){
i ;
}
return i;
}

上面的函數只是計算元素Element,也就是nodeType為1的節點,文字節點、註解節點等將不被統計。如果需要計算所有節點在內,則不能適用sourceIndex,因為該屬性只針對Element. previousElementSibling也要相應的改為previousSibling. 那就要寫成如下的函數了:

複製程式碼 程式碼如下:
function getNodeIndex(node){
var i=0;
while(node){
var i=0;
while(iblevious ){
i ;
}
return i;
}


後記:在非IE下,有compareDocumentPosition 方法用於比較節點的位置關係,但經過測試該方法的效能非常差,其內部的實作機制肯定不是像IE那樣快取了資源索引號的,如果這個方法極高效,那就可採用二分法進行計算,從而提高效率,但目前還不可能。
最後的總結:


對於表格TD和TR元素優先使用cellIndex和rowIndex屬性。

對於IE優先使用sourceIndex屬性。

其它情形使用previousElementSibling 或 previousSibling 進行遍歷。
compareDocumentPosition 方法的效能非常差。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在jQuery中刪除最後一個子元素? 如何在jQuery中刪除最後一個子元素? Feb 19, 2024 pm 09:40 PM

如何在jQuery中刪除最後一個子元素?

了解事件冒泡機制:為何子元素的點擊會影響父元素的事件? 了解事件冒泡機制:為何子元素的點擊會影響父元素的事件? Jan 13, 2024 pm 02:55 PM

了解事件冒泡機制:為何子元素的點擊會影響父元素的事件?

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式 使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式 Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式

使用jQuery刪除元素的最後一個子元素 使用jQuery刪除元素的最後一個子元素 Feb 26, 2024 pm 12:39 PM

使用jQuery刪除元素的最後一個子元素

使用:nth-child偽類選擇器選擇特定位置的子元素的CSS樣式 使用:nth-child偽類選擇器選擇特定位置的子元素的CSS樣式 Nov 20, 2023 pm 04:43 PM

使用:nth-child偽類選擇器選擇特定位置的子元素的CSS樣式

如何利用jQuery判斷元素是否包含子元素 如何利用jQuery判斷元素是否包含子元素 Feb 28, 2024 am 11:03 AM

如何利用jQuery判斷元素是否包含子元素

jQuery實作判斷元素是否存在子元素功能 jQuery實作判斷元素是否存在子元素功能 Feb 28, 2024 pm 12:54 PM

jQuery實作判斷元素是否存在子元素功能

jQuery實例:如何利用jQuery刪除最後一個子元素? jQuery實例:如何利用jQuery刪除最後一個子元素? Feb 20, 2024 pm 07:45 PM

jQuery實例:如何利用jQuery刪除最後一個子元素?

See all articles