Saber 酱的抱枕

如果有两个或多个处在同一层级的元素，怎么用 JavaScript 判断它们的先后顺序呢？可以使用 compareDocumentPosition API。

下面是个简单的示例：

const compareValue = a.compareDocumentPosition(b)
if (compareValue == 2) {
  // b 在前
} else if (compareValue == 4) {
  // b 在后
} else if (compareValue == 0) {
  // a 就是 b 元素自身
} else {
  // 其它位置关系
}

这是我在张鑫旭大神的博客看到的：DOM节点文档前后位置判断

当时我在给本站的文章添加章节导航，文章里有多个 H3 和 H4 标题，它们全都是平级的，并且互相之间还夹杂着其他元素。我要按照它们出现的顺序进行处理，所以就需要比较元素的先后顺序。搜到上面的办法之后就很简单了。

我写了个 Demo：compareDocumentPosition.html
如果你有更好的方法也欢迎在评论区留言~

文章里添加的章节导航：

JavaScript 使用 compareDocumentPosition 判断两个元素的位置关系（前后顺序）