强大的未知网络 API
作为前端开发人员，我们经常需要操作 DOM 并与之交互。虽然我们了解很多常用的方法，但还有很多功能强大的 Web API 鲜为人知，所以让我来和大家分享其中的一些 :)
nodeA.compareDocumentPosition(nodeB)
这是一个非常棒的方法，可以帮助你更好地理解当前 DOM 的结构。有时你需要知道当前操作的节点在 DOM 中的位置，或者需要更精确地控制对特定节点的更改，使用这种方法可以更安全地实现这些操作。
该方法会返回一个值，告诉你当前节点相对于bitmaskDOM 的位置，可能的取值包括：nodeAnodeB
| 姓名 | 价值 |
|---|---|
| 文档位置已断开 | 1 |
| 文档位置_前置 | 2 |
| 文档位置_以下 | 4 |
| DOCUMENT_POSITION_CONTAINS | 8 |
| 文档位置包含 | 16 |
| 文档位置实施特定 | 32 |
你可以通过查看这个简单的CodesandBox 示例来快速了解它的用法，并尝试更好地理解它。
这款游戏还有一个非常棒的优点，那就是它拥有出色的跨浏览器支持。🥳
node.contains(anotherNode)
沿用之前的方法，最常见的比较之一是判断一个节点是否包含在另一个节点之内。例如，假设有以下 HTML 代码：
<div id="container">
<div>
<span id="user-name" />
</div>
</div>
你需要确保它<span id="user-name />位于容器 div 元素内。使用之前的方法，你可以这样做：
const container = document.querySelector('#container');
const userName = document.querySelector('#user-name')
if(container.compareDocumentPosition(userName) & Node.DOCUMENT_POSITION_CONTAINS){
console.log(`container contains userName`);
}
但由于这种需求非常普遍，我们找到了一种更简便的方法来实现同样的目标：
const container = document.querySelector('#container');
const userName = document.querySelector('#user-name')
if(container.contains(userName)){
console.log(`container contains userName`);
}
node.isEqualNode(nodeB)
这个功能顾名思义，就是比较两个节点是否等效，而不是它们是否相同。例如，假设我们有以下 HTML 代码：
<h1>Hello World!</h1>
<div>
<div>
<h1>Hello World!</h1>
</div>
</div>
如果我们这样比较：
const nodes = document.querySelectorAll("h1");
console.log(nodes[0].isEqualNode(nodes[1])); // true
这将比较节点的内容、属性和类型，以检查它们是否等效，因此这意味着像id向其中一个节点添加一个这样的小更改就足以在比较中返回 false。
node.replaceWith()
这个功能有点像魔法🧙🏻♀️，它可以让你获取一个节点，并将其从 DOM 中移除，替换成一个全新的节点。
让我们看看它在以下 HTML 代码中是如何工作的：
<div>
<div>
<h1 id="nodeB">NODE B</h1>
</div>
</div>
如果我们执行以下几行 JavaScript 代码：
const nodeB = document.querySelector("#nodeB");
const nodeC = document.createElement('h2');
nodeC.textContent = 'Node C';
nodeB.replaceWith(nodeC)
就像变魔术一样，我们当前的 DOM 结构将变为：
<div>
<div>
<h2>Node C</h2>
</div>
</div>
希望你今天在这里学到了一些新东西，如果你已经知道这些内容，或者学到了新知识，请在评论区告诉我🙂
文章来源：https://dev.to/assuncaocharles/powerful-unknown-web-apis-34ji