获取多个类名的dom元素

可以使用document.querySelectorAll()方法来获取多个类名的DOM元素，该方法返回一个NodeList对象，可以通过遍历该对象来获取每个元素。

例如，要获取类名为"example"和"test"的所有元素，可以使用以下代码：

var elements = document.querySelectorAll('.example, .test');

其中，".example"和".test"是CSS选择器，表示类名为"example"和"test"的元素。

相关问题

获取dom元素类名

你可以使用JavaScript的`className`属性来获取DOM元素的类名。例如，假设你有一个`<div>`元素，并且它有一个名为`box`的类，你可以使用以下代码获取它的类名：

var divElement = document.getElementById("myDiv");
var className = divElement.className; // 获取类名，结果为 "box"

如果该元素有多个类名，那么返回的是一个字符串，包含它们之间用空格分隔的所有类名。你也可以使用`classList`属性来获取元素的类名列表，这样更方便进行操作。例如，以下代码获取了一个元素的所有类名：

var divElement = document.getElementById("myDiv");
var classList = divElement.classList; // 获取类名列表

你可以使用`classList`的方法来添加、删除和切换类名。例如，以下代码将向元素添加一个名为`newClass`的类：

var divElement = document.getElementById("myDiv");
divElement.classList.add("newClass"); // 添加新类

vue3获取多个同名dom元素 不用v-for 并且添加类名

可以使用 Vue 3 的 `ref` 和 `querySelectorAll` 方法来获取多个同名的 DOM 元素，并且添加类名。具体步骤如下：

1. 在模板中，给需要获取的 DOM 元素添加 `ref` 属性：

<div ref="myDiv"></div>
<div ref="myDiv"></div>
<div ref="myDiv"></div>

2. 在组件中，使用 `$refs` 属性和 `querySelectorAll` 方法来获取多个同名的 DOM 元素：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myDivs = ref([]);

    onMounted(() => {
      myDivs.value = Array.from(document.querySelectorAll('[ref="myDiv"]'));
    });

    const addClassName = () => {
      myDivs.value.forEach(div => {
        div.classList.add('my-class');
      });
    };

    return {
      myDivs,
      addClassName
    };
  }
};

3. 在需要的时候，调用 `addClassName` 方法来给多个同名的 DOM 元素添加类名：

<button @click="addClassName">Add Class Name</button>

这样，就可以在不使用 `v-for` 的情况下，获取多个同名的 DOM 元素，并且给它们添加类名了。注意，在组件中通过 `onMounted` 钩子获取 DOM 元素是一个比较好的实践，因为此时模板中的 DOM 元素已经被渲染出来了。