高效的獲取當前元素是父元素的第幾個子元素

2019-11-20 21:53:22

字體：大中小

來源：轉載

供稿：網友

例如處理事件的時候，有時候需要知道當前點擊的是第幾個子節點，而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(ele){ 
//IE is simplest and fastest 
if(ele.sourceIndex){ 
return ele.sourceIndex - ele.parentNode.sourceIndex - 1; 
} 
//other browsers 
var i=0; 
while(ele = ele.previousElementSibling){ 
i++; 
} 
return i; 
} 

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

復制代碼代碼如下:

 
function getNodeIndex(node){ 
var i=0; 
while(ele = ele.previousSibling){ 
i++; 
} 
return i; 
} 

后記：在非IE下，有 compareDocumentPosition 方法用于比較節點的位置關系，但經過測試該方法的性能非常差，其內部的實現機制肯定不是像IE那樣緩存了資源索引號的，如果這個方法極高效，那就可采用二分法進行計算，從而提高效率，但目前還不可能。

最后的總結：

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

對于IE優先使用sourceIndex屬性。

其它情形使用previousElementSibling 或 previousSibling 進行遍歷。

compareDocumentPosition 方法的性能非常差。

上一篇：Javascript 實現的數獨解題算法網頁實例

下一篇：JS 實現點擊a標簽的時候讓其背景更換