JavaScript 当前元素是其父元素的第几个子元素

现有如下代码，想要知道标签 h2 是div的第几个子元素。要求用JavaScript实现。

<div>
    <p>欧阳修欧阳修欧阳修欧阳修</p>
    <h3>司马光司马光司马光司马光司马光司马光</h3>
    <p>白起白起白起白起白起白起白起白起白起白起白起</p>
    <h2 id="first-h2">吴起吴起吴起吴起吴起吴起吴起吴起吴起吴起</h2>
    <h4>王翦王翦王翦王翦王翦王翦王翦王翦王翦王翦王翦王翦王翦</h4>
</div>

方法一：使用previousElementSibling属性

previousElementSibling属性，返回当前元素前面的兄弟节点。

完整代码如下：

var order=1;
var currentElement=document.getElementById("current-element");
while(currentElement.previousElementSiblings){
  order++;
  currentElement=currentElement.previousElementSiblings
}

思路：

• order，用来表示是该元素是其父元素的第几个子节点。
• 使用previousElementSiblings 获取当前元素前面的兄弟节点，order的值加一，currentElement更新为前面的兄弟节点。
• 使用while语句，直至获取不到当前元素前面的兄弟节点。

方法二：获取父元素的所有子元素，逐一和当前元素对比，若相同则返回对应的下标。 可以将id、class等其他属性作为对比条件。

    var currentElement=document.getElementById("first-h2");
    var xiongdi=currentElement.parentElement.children;
    var order=0;
    for(var i=0;i<xiongdi.length;i++){
        if(xiongdi[i].id==="first-h2"){
            order=i+1;
            break;
        }       
    }