原生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