unicorn/prefer-modern-dom-apis 样式

🚧 自动修复仍在开发中。

其作用

强制使用

• 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);

参考

• 规则来源