const el = document.querySelector('#myElement');改为选择所有类名为class1的元素

可以使用以下代码来选择所有类名为 `class1` 的元素：

const elements = document.querySelectorAll('.class1');

这里使用了 `querySelectorAll` 方法，它可以返回文档中所有与指定选择器匹配的元素，返回一个 NodeList 对象。然后可以使用 NodeList 对象中的元素进行后续操作。

相关问题

vue3 $el.querySelector报错 querySelector is not a function

在 Vue 3 中，如果你在 `mounted()` 或其他生命周期钩子里尝试使用 `$el.querySelector()` 报错说 `querySelector` 不是一个函数，这通常是由于以下几个原因：

1. **错误的对象**：确认你是在正确的元素上使用这个方法。确保 `$el` 对象是 Vue 实例的根节点元素 (`document.getElementById('app')` 或者是 `ref`、`v-ref` 或者 `ref.sync` 返回的实际 DOM 元素)。

   mounted() {
     const el = this.$el; // 确保这是正确的DOM元素
     if (el && el.nodeType === Node.ELEMENT_NODE) {
       const myElement = el.querySelector('.my-class');
     }
   }

2. **异步操作**：`$el` 可能在 `mounted()` 钩子执行之前还没有加载完成。如果你的查询需要依赖DOM渲染，应该在适当的时机（如`nextTick`）内执行。

   mounted() {
     this.$nextTick(() => {
       const myElement = this.$el.querySelector('.my-class');
     });
   }

3. **非Vue组件**：确保你在Vue组件内部进行这个操作，如果是在自定义指令或者插件中，确保它在Vue实例上下文中。

4. **组件未挂载**：确保该组件已经成功挂载到文档中，检查浏览器开发者工具看看是否有警告或错误。

若仍然遇到问题，可以检查代码中的具体使用场景，并查看是否在正确的时间和上下文中使用了 `$el.querySelector()` 方法。同时，确保你引用的是Vue 3 版本，因为Vue 2 和 Vue 3 的 API 可能有所不同。

querySelector

`querySelector` 是 `Document` 和 `Element` 接口提供的方法，用于返回文档中与指定选择器或选择器组匹配的第一个元素。如果找不到匹配的元素，则返回 `null`。

`querySelector` 的语法如下：

element = document.querySelector(selectors);

其中，`selectors` 是一个或多个 CSS 选择器，用逗号分隔。可以使用如下的 CSS 选择器：

- 类选择器：`.class`
- ID 选择器：`#id`
- 属性选择器：`[attr=value]`
- 后代选择器：`ancestor descendant`
- 子元素选择器：`parent > child`
- 相邻兄弟选择器：`prev + next`
- 普通兄弟选择器：`prev ~ siblings`

例如，要选择 id 为 `myElement` 的元素，可以使用以下代码：

const el = document.querySelector('#myElement');

这将返回文档中第一个 id 为 `myElement` 的元素。