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