高效的获取当前元素是父元素的第几个子元素
更新时间：2013年10月15日 16:46:47 作者：
例如处理事件的时候，有时候需要知道当前点击的是第几个子节点，而HTML DOM本身并没有直接提供相应的属性，需要自己来计算。感兴趣的朋友可以了解下本文
例如处理事件的时候，有时候需要知道当前点击的是第几个子节点，而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 方法的性能非常差。
从一个索引序号，很容易得到该索引对应的子节点或者子元素，直接用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 方法的性能非常差。
相关文章
本文主要介绍了函数四种调用模式以及其中的this指向的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了微信小程序：数据存储、传值、取值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
闲暇之余，学习了一下jfreechart图表生成，结合大虾们的著作，小弟进行了系统的总结，真是获益匪浅，这里推荐给小伙伴们，有需要的朋友可以参考下。2015-04-04
Symbol是一种特殊的、不可变的数据类型,可以作为对象属性的标识符使用,表示独一无二的值,这篇文章主要给大家介绍了关于JS中Symbol类型的介绍与基本用法的相关资料,需要的朋友可以参考下2024-04-04
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件,JS延迟加载有助于提高页面加载速度,本文小编给大家介绍了JS延迟加载的几种方式小结,感兴趣的小伙伴跟着小编一起来看看吧2024-08-08
如何实现select组件的选择输入过滤作用，下面有一段js代码，很实用，需要的朋友可以看看2014-10-10
javascript-表格排序(降序/反序)实现介绍(附图)
使用了Array方法、sort:降序、reverse:反序完成了基本功能，对于联合排序没有实现，感兴趣的朋友可以参考下哈2013-05-05
js 下拉菜单实现代码，原理比较简单，需要的朋友可以参考下，具体的美化要靠自己。2010-05-05
这篇文章主要介绍了前端开发中实现网页或图像水印的六种方法,包括使用CSS背景图、HTML5 Canvas、SVG、图片处理库、HTML DOM元素以及后端生成,每种方法都有其优缺点,适用于不同的场景,需要的朋友可以参考下2025-01-01
学习的目的是对装饰者模式模式有进一步的理解，并运用在自己的项目中；对TypeScript装饰器的理解，更好的使用装饰器，例如在nodejsweb框架中、vue-property-decorator中，或者是自定义装饰器，能熟练运用并掌握其基本的实现原理。2021-04-04
最新评论