携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情
Node.compareDocumentPosition()方法可以用来对比两个HTML节点在文档中的位置关系
包括兄弟节点间的先后关系，父子节点，是否是自身节点以及跨文档
不仅是DOM节点，文本节点，注释节点甚至属性节点的位置关系都可以判定
基本使用
# otherNode 相对于 node节点的 位置关系
compareValue = node.compareDocumentPosition(otherNode)
compareValue是返回值，是整数值，可能的值如下
// 基础节点
// 是同一个节点
document.body.compareDocumentPosition(document.body); // => 0
// <body>在<head>后面
document.head.compareDocumentPosition(document.body) // => 4
// -----------------------------------------------
// 复合节点
// body 被 documentElement 包裹 -- 8
// body 元素开始标签 位于 documentElement开始标签后 --- 2
// 2 + 8 = 10
document.body.compareDocumentPosition(document.documentElement); // => 10
// documentElement 包裹了 body --- 16
// documentElement 在 body元素 之前 --- 4
// 4 + 16 = 20
document.documentElement.compareDocumentPosition(document.body) // => 20
所以直接通过compareDocumentPosition方法 拿到两个元素之间的关系值是没有任何意义的，因为这个值可能是多种状态的组合值
所以实际使用过程中，需要将compareDocumentPosition方法的返回值和MDN提供的状态常量值进行按位与操作，当结果为1的时候，表示两个节点之间为关系即为对应状态常量值所对应的状态
console.log(document.body.compareDocumentPosition(document.documentElement) & Node.DOCUMENT_POSITION_PRECEDING) // => 1
compareDocumentPosition不仅仅可以用来比较两个元素之间的关系，还可以用来比对HTML属性节点的前后位置关系
<img id="img1" src="./example.jpg" alt="img1">
<img id="img2" alt="img2" src="./example.jpg">
// img#img1
console.log(altNode.compareDocumentPosition(srcNode)); // => 32 + 2 = 34
// img#img2
console.log(altNode.compareDocumentPosition(srcNode)); // => 32 + 4 = 36
