高效的获取当前元素是父元素的第几个子元素

2020-02-15 16:00:38来源：爱站网阅读 ()

在JS开发中，我们可以通过ID找到子元素，然后获取子元素对象，并通过parentnode属性获取父元素对象，下面是爱站技术频道小编带给大家的高效的获取当前元素是父元素的第几个子元素。
从一个索引序号，很容易得到该索引对应的子节点或者子元素，直接用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那样缓存了资源索引号的，如果这个方法极高效，那就可采用二分法进行计算，从而提高效率，但目前还不可能。

以上就是关于高效的获取当前元素是父元素的第几个子元素，当然除了本文介绍的知识之外，爱站技术频道还整理了更多知识，请继续关注js.aizhan.com。

原文链接:https://js.aizhan.com/develop/JavaScript/11560.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有