document.querySelector和document.getElementBy
时间: 2025-04-24 10:14:18 浏览: 41
### Document.querySelector 与 document.getElementById 的用法区别
`document.querySelector` 和 `document.getElementById` 都是用来获取文档中的元素,但是两者之间存在一些显著的区别。
#### 获取方式不同
- `document.getElementById` 只能通过 ID 属性来定位单个唯一的 HTML 元素。ID 应该在整个页面中唯一[^1]。
- `document.querySelector` 支持 CSS 选择器语法,可以基于标签名、类名、属性等多种条件查询第一个匹配的节点[^2]。
#### 返回值差异
- 使用 `document.getElementById` 方法返回的是具有指定 ID 的首个 Element 对象;如果找不到,则返回 null。
- 而对于 `document.querySelector` 来说,当没有找到任何符合条件的元素时也会返回 null,但如果找到了多个满足条件的元素它只会选取并返回其中的第一个。
#### 示例代码对比
使用 `getElementById` 获取元素:
```javascript
var elementById = document.getElementById('uniqueId');
console.log(elementById);
```
利用 `querySelector` 进行更灵活的选择操作:
```javascript
// 根据 id 查询
var elementByIdSelector = document.querySelector('#uniqueId');
// 或者根据其他 css 选择符如 class name, tag name 等
var firstElementOfClass = document.querySelector('.className'); // 类名为 className 的第一个元素
var specificTag = document.querySelector('div'); // 文档流里遇到的第一个 div 标签
console.log(firstElementOfClass, specificTag);
```
阅读全文
相关推荐













