document.querySelector 多个符合条件的元素

根据提供的引用内容，`document.querySelector`仅返回第一个符合条件的元素，如果需要获取多个符合条件的元素，可以使用`document.querySelectorAll`方法。该方法返回一个NodeList对象，可以通过遍历该对象来获取所有符合条件的元素。

以下是一个获取所有class为example的元素的例子：

var elements = document.querySelectorAll('.example');
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i]);
}

相关问题

document.getElementById与document.querySelector的区别

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

1. **选择器范围**：
- `getElementById`: 这个方法通过元素的id属性精确匹配一个元素。它返回的是第一个匹配的id的元素，如果没有找到则返回null。
- `querySelector`: 使用CSS选择器语法，可以选择任意复杂的节点，不仅限于id，可以匹配标签名、类名、属性值等。如果多个元素匹配该选择器，它会返回第一个匹配到的元素。

2. **灵活性**：
- `getElementById` 更加直接和简单，适合查找已知id的唯一元素。
- `querySelector` 更加灵活，能处理更复杂的查询场景，比如动态生成的DOM或者选择嵌套结构中的特定元素。

3. **性能**：
- 对于只有一个id的元素，`getElementById` 通常更快一些，因为它内部有一个缓存机制，避免了对整个文档的遍历。
- 当你需要寻找复杂的选择器或多个符合条件的元素时，`querySelector` 的性能可能会稍差，因为它需要解析和执行选择器表达式。

document.queryselector()

### 回答1：
document.querySelector()是JavaScript中的一个方法，用于在文档中选择一个元素并返回它。它接受一个CSS选择器作为参数，可以选择任何符合该选择器的元素。如果找到多个匹配的元素，则只返回第一个。如果没有找到匹配的元素，则返回null。

### 回答2：
document.queryselector() 是一种在 JavaScript 中使用的方法，用于选择 HTML 文档中的元素。它的作用是返回文档中满足指定选择器的第一个元素，如果没有匹配到则返回 null。

这个方法的本质是通过使用 CSS 选择器来查找并返回匹配的元素。可以使用各种选择器，例如 class、id、标签名、属性值等等，只要符合 CSS 规范即可。

使用此方法可以方便地操作和获取文档中特定的元素，可以用来修改元素的属性、添加、删除、编辑子元素，甚至是为页面添加交互行为等等。

常见的用法有：

1. 通过 ID 获取元素

document.queryselector("#idName");

2. 通过 class 获取元素

document.queryselector(".className");

3. 通过标签名获取元素

document.queryselector("tagName");

4. 通过属性值获取元素

document.queryselector("[attrName='attrValue']");

需要注意的是，此方法仅返回匹配到的第一个元素。如果需要获取所有匹配的元素，可以使用 document.querySelectorAll() 方法。

最后，使用 document.queryselector() 方法时，建议使用模块化的编程方式来管理代码，以便更好地维护和扩展代码。

### 回答3：
document.querySelector() 是一种 JavaScript 方法，它通过选择指定的 HTML 元素来获取该元素的引用。它的作用类似于 document.getElementById()，但是它能够以更灵活的方式选择元素，支持使用 CSS 选择器以及选择多个元素。该方法的语法格式如下：

document.querySelector(selector);

其中，`selector` 表示 CSS 选择器，用于指定要选择的元素。需要注意的是，该方法只会返回第一个匹配的元素，如果没有匹配的元素，则会返回 `null`。

使用 document.querySelector() 的时候，可以选择任意一个 DOM 元素，包括文档中唯一元素的 id、类（class）、标签名等等。如果有多个相同的元素被选中，仅返回第一个。事实上，它的强大之处在于能够查询 DOM 中的任何一个元素，前提是你掌握了使用 CSS 选择器的技巧。

除了查询单个元素，该方法还支持查询多个元素，这时候需要使用 document.querySelectorAll() 方法，该方法会返回一个 NodeList 对象，包括了匹配的所有元素，可以通过循环 NodeList 中的元素来进行相关操作。

在实际开发中，document.querySelector() 方法非常常用，可以帮助我们快速定位到需要操作的元素，提高开发效率。但同时也需要注意，选择器不当会影响性能，查询到的元素不一定是我们想要的，因此在使用该方法时，我们需要谨慎而明确的选择元素以及使用正确的查询规则。