vue获取多个dom

您可以使用`document.querySelectorAll()`方法来获取多个DOM元素。该方法接受一个CSS选择器作为参数，并返回符合该选择器的所有DOM元素的NodeList对象。例如，如果您想获取所有class为"my-class"的元素，您可以这样写代码：

let elements = document.querySelectorAll(".my-class");

这将返回一个包含所有匹配元素的NodeList对象。您可以使用索引来访问其中的元素，就像这样：

let firstElement = elements[0];
let secondElement = elements[1];
// ...

您也可以使用`forEach()`方法来遍历所有元素，就像这样：

elements.forEach(function(element) {
  // 在这里处理每个元素
});

相关问题

vue3 ref 获取多个Dom

在Vue 3中，可以使用ref属性获取多个DOM元素。通过在v-for循环中动态绑定ref属性，并定义一个获取对应DOM元素的回调函数，可以实现这一功能。具体步骤如下：
1. 在模板中使用v-for循环来创建多个元素，并在每个元素上绑定ref属性。
2. 在setup函数中定义一个空数组，准备接收循环的DOM元素。
3. 定义一个动态ref所对应的回调函数，将获取到的DOM元素push到空数组中。
4. 将回调函数返回给模板，这样就可以获取到多个DOM元素。

请注意，由于获取多个DOM元素是在循环中进行的，所以需要在组件挂载后，即onMounted生命周期钩子中获取DOM元素。这样可以确保在获取DOM元素时，它们已经存在于DOM树中。

以下是一个示例代码：

<<引用:1.获取 v-for 循环的结点，需要动态绑定 ref 属性，并定义一个获取对应DOM元素的回调函数。
<template>
<h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
name: 'Ref',
setup () {
// 定义一个空数组，准备接收循环的DOM元素
let listDom = []

// 定义动态ref所对应的回调函数，将获取到的DOM元素push到空数组中
const getlist = (el) => {
listDom.push(el)
}

// 在组件挂载后获取DOM元素
onMounted(() => {
console.log(listDom) // 输出获取到的多个DOM元素
})

return {
getlist
}
}
}
</script>
引用:参考：(28条消息) vue3中通过ref属性获取DOM_李公子丶的博客-CSDN博客_vue3 通过ref获取dom。

vue获取slot的dom

Vue通过使用`$slots`属性来获取插槽（slot）的DOM内容。

在Vue中，支持使用命名插槽和默认插槽。命名插槽允许我们在组件中定义多个插槽，并使用不同的名称进行区分。默认插槽则是没有具体名称的插槽。

要获取插槽的DOM，我们可以使用`$slots`属性。`$slots`属性是一个对象，包含了所有插槽的内容。每个插槽都可以通过其名称来访问。

例如，假设我们在父组件中使用了一个带有默认插槽和命名插槽的子组件，我们可以通过以下方式获取它们的DOM内容：

<template>
  <child-component>
    <p slot="header">This is the header slot.</p>
    <p>This is the default slot.</p>
  </child-component>
</template>

// 子组件
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    const headerSlotContent = this.$slots.header; // 获取命名插槽的DOM
    const defaultSlotContent = this.$slots.default; // 获取默认插槽的DOM
    console.log(headerSlotContent); 
    console.log(defaultSlotContent);
  },
}
</script>

在子组件的`mounted`生命周期钩子中，我们可以通过`this.$slots`来获取插槽的DOM内容。`$slots`是一个包含了插槽名称作为键，对应DOM内容的对象。我们可以通过插槽的名称来访问相应的DOM。

当上述代码执行时，控制台会输出命名插槽和默认插槽的DOM内容。我们可以根据需要对插槽的DOM进行操作或渲染。