← Back to rules

unicorn/prefer-query-selector 严格

🛠️ An auto-fix is available for this rule for some violations.

它做了什么

优先使用 .querySelector() 替代 .getElementById()，使用 .querySelectorAll() 替代 .getElementsByClassName() 以及 .getElementsByTagName()。

为什么这是不好的？

• 使用 .querySelector() 和 .querySelectorAll() 更加灵活，允许使用更具体的选择器。
• 统一使用同一种方法来查询 DOM 元素更好。这有助于保持一致性，并为未来的改进（例如使用更具体的选择器）提供便利。

示例

此规则的错误代码示例：

document.getElementById("foo");
document.getElementsByClassName("foo bar");
document.getElementsByTagName("main");
document.getElementsByClassName(fn());

此规则的正确代码示例：

document.querySelector("#foo");
document.querySelector(".bar");
document.querySelector("main #foo .bar");
document.querySelectorAll(".foo .bar");
document.querySelectorAll("li a");
document.querySelector("li").querySelectorAll("a");

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-query-selector": "error"
  }
}

CLI

oxlint --deny unicorn/prefer-query-selector

参考资料

• 规则源码