← Back to rules

unicorn/prefer-modern-dom-apis Style

💡 A suggestion is available for this rule.

它的作用

强制使用：

• 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 节点对象。

示例

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

oldChildNode.replaceWith(newChildNode);

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

parentNode.replaceChild(newChildNode, oldChildNode);

如何使用

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-modern-dom-apis": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  rules: {
    "unicorn/prefer-modern-dom-apis": "error",
  },
});

CLI

oxlint --deny unicorn/prefer-modern-dom-apis

版本

此规则在 v0.0.20 中添加。

参考资料

• Rule Source
• Open rule in Oxc Playground