原生JS如何获取当前元素属于父元素第几个子元素

我们经常通过document.getElementById 方法来获取到一个元素，这个时候我们经常需要有一个需求，那就是如何判断这个元素在父元素中的位置。

包含文本和注释节点
原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性，额外需要注意的是该属性会遍历text节点，即回车键。

从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。

var child = this;
while( (child = child.previousSibling) != null ) 
    i++;

案例代码如下：

Html:

<ul id="ul"><li>123</li><li id="a">a</li><li>b</li><li>c</li></ul>

JS:

var child = document.getElementById("a");
var i = 0;
while((child = child.previousSibling) != null) i++;
console.log(i) //console 1

通过循环遍历previousSibling 属性是否为null这个小技巧，就可以获取到当前元素在父元素中的位置了。

不包含文本节点和注释节点
实现代码如下：

var child = document.getElementById("a");
var parent = child.parentNode;
var index = Array.prototype.indexOf.call(parent,child);
console.log(index)//1

原文链接：https://www.pipipi.net/code/9...

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2332