---
url: /docs/guide/usage/linter/rules/unicorn/prefer-query-selector.md
---

### 作用

优先使用 `.querySelector()` 而不是 `.getElementById()`。并且优先使用 `.querySelectorAll()`
而不是 `.getElementsByClassName()`、`.getElementsByTagName()` 和 `.getElementsByName()`。

### 为什么这不好？

* 使用 `.querySelector()` 和 `.querySelectorAll()` 更灵活，并且允许使用更具体的选择器。
* 使用相同的方法查询 DOM 元素会更好。这有助于保持一致性，并且便于未来改进（例如更具体的选择器）。

### 示例

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

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

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

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

## 如何使用

## 版本

此规则于 v0.0.15 中加入。

## 参考资料