document.querySelector与document.getElementById有什么区别

`document.querySelector` 和 `document.getElementById` 都是JavaScript中用于从HTML文档中获取特定元素的方法，但它们有以下几个关键的区别：

1. **选择器范围**:
- `getElementById`: 只能返回具有指定id的单个元素。id应该是全局唯一的。
- `querySelector`: 支持CSS选择器，可以选择任何一个符合该选择器的第一个元素。这包括类名、标签名、属性等多种复杂的匹配规则。

2. **灵活性**:
- `getElementById` 灵活性较低，只能匹配id，对于更复杂的选择需求，如基于类名或其他条件筛选元素，它就无能为力了。
- `querySelector` 则非常灵活，能够处理各种复杂的CSS选择器，比如`.myClass`、`#myDiv > p`这样的例子。

3. **性能影响**:
- 如果需要的元素是唯一的，`getElementById`通常更快，因为它不需要解析整个文档来寻找匹配项。
- 但如果目标元素不是唯一的，使用`querySelector`并指定一个精确选择器会更有效率，因为它会在找到第一个匹配的元素后停止搜索。

因此，在选择哪种方法时，要考虑实际场景的需求和效率考虑。如果只需要查找id对应的元素，`getElementById`更直接；如果需要基于多种条件动态选择元素，`querySelector`更为合适。