---
url: /docs/guide/usage/linter/rules/unicorn/prefer-modern-dom-apis.md
---

### 它的作用

强制使用：

* `childNode.replaceWith(newNode)`，而不是 `parentNode.replaceChild(newNode, oldNode)`
* `referenceNode.before(newNode)`，而不是 `parentNode.insertBefore(newNode, referenceNode)`
* `referenceNode.before('text')`，而不是 `referenceNode.insertAdjacentText('beforebegin', 'text')`
* `referenceNode.before(newNode)`，而不是 `referenceNode.insertAdjacentElement('beforebegin', newNode)`

### 为什么这不好？

使用较新的 DOM API 有一些优点，例如：

* 无需遍历到父节点。
* 可以一次追加多个节点。
* 既可以操作 `DOMString`，也可以操作 DOM 节点对象。

### 示例

以下是此规则的**错误**代码示例：

```javascript
oldChildNode.replaceWith(newChildNode);
```

以下是此规则的**正确**代码示例：

```javascript
parentNode.replaceChild(newChildNode, oldChildNode);
```

## 如何使用

## 版本

此规则在 v0.0.20 中添加。

## 参考资料