如何使用纯JavaScript获取指定div元素的nth-child序号

你写的代码不能运行是因为原生DOM元素没有内置的getChildNumber()方法，需要自行实现对应的计数逻辑，以下是可直接使用的实现方案：

方案1：全兼容版本（支持所有新旧浏览器） #

计数逻辑完全对齐CSS nth-child 规则：从1开始计数，仅统计元素节点，忽略文本、注释等非元素节点。

完整可运行代码： #

<div>One</div>
<div>Two</div>
<div id="myDiv">Three</div>
<div>Four</div>

<script>
function getNthChildIndex(elm) {
  // nth-child从1开始计数，所以初始值设为1
  let index = 1;
  // 遍历前面的所有同级元素节点，每有一个计数+1
  while (elm.previousElementSibling) {
    index++;
    elm = elm.previousElementSibling;
  }
  return index;
}

var elm = document.getElementById("myDiv");
alert(getNthChildIndex(elm)); // 输出结果为3，符合预期
</script>

IE8及更早浏览器兼容适配 #

如果需要兼容不支持previousElementSibling的老浏览器，可以使用节点类型判断的版本：

function getNthChildIndexCompat(elm) {
  let index = 1;
  while ((elm = elm.previousSibling)) {
    // nodeType等于1代表是元素节点，跳过文本、注释等其他节点
    if (elm.nodeType === 1) index++;
  }
  return index;
}

方案2：现代浏览器极简实现 #

支持ES6的浏览器可以直接用数组转换的方式实现，代码更简洁：

const getNthChildIndex = elm => Array.from(elm.parentNode.children).indexOf(elm) + 1;

注意事项 #

• 上述所有方法返回的序号和CSS nth-child规则完全一致，起始值为1
• 如果需要获取同标签元素的nth-of-type序号，需要额外增加标签匹配的逻辑

内容的提问来源于stack exchange，提问作者Devs