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

例如處理事件的時候,有時候需要知道當前點擊的是第幾個子節點,而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 方法的性能非常差。

發佈了165 篇原創文章 · 獲贊 151 · 訪問量 148萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章