unicorn/prefer-modern-dom-apis Style

🚧 An auto-fix is still under development.

What it does

Enforces the use of:

• childNode.replaceWith(newNode) over parentNode.replaceChild(newNode, oldNode)
• referenceNode.before(newNode) over parentNode.insertBefore(newNode, referenceNode)
• referenceNode.before('text') over referenceNode.insertAdjacentText('beforebegin', 'text')
• referenceNode.before(newNode) over referenceNode.insertAdjacentElement('beforebegin', newNode)

Why is this bad?

There are some advantages of using the newer DOM APIs, like:

• Traversing to the parent node is not necessary.
• Appending multiple nodes at once.
• Both DOMString and DOM node objects can be manipulated.

Examples

Examples of incorrect code for this rule:

oldChildNode.replaceWith(newChildNode);

Examples of correct code for this rule:

parentNode.replaceChild(newChildNode, oldChildNode);

How to use

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

CLI

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

Config (.oxlintrc.json)

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

References

• Rule Source