querySelectorAll获取元素的类名

querySelectorAll()是JavaScript中用于获取文档中所有匹配指定CSS选择器的元素集合的方法，它返回的是NodeList对象。如果你想通过这个方法获取到元素的类名，你需要结合其他DOM操作，例如`classList`属性。

举个例子：

let elements = document.querySelectorAll('.className'); // 获取class名为"className"的所有元素

for(let i = 0; i < elements.length; i++) {
    let element = elements[i];
    if(element.classList.contains('className')) { // 判断元素是否包含特定类名
        console.log(element.className); // 输出元素的类名
    }
}

这里`.className`表示你要查找的具体类名，`element.classList.contains('className')`会检查元素是否具有该类。如果你只想得到拥有某个类名的所有元素的类名列表，可以遍历并收集它们。

相关问题

querySelectorAll获取元素高度

### 使用 `querySelectorAll` 获取 DOM 元素的高度

为了获取多个具有相同类名或其他共同属性的 DOM 元素高度，可以利用 JavaScript 的 `document.querySelectorAll()` 方法配合遍历这些元素并读取它们各自的 `offsetHeight` 属性来实现这一目标[^2]。

下面是一个具体的实例展示如何操作：

// 假设要查询所有 class 为 'item' 的 div 标签
const elements = document.querySelectorAll('.item');

elements.forEach(element => {
    console.log('Element height:', element.offsetHeight);
});

这段代码首先调用了 `document.querySelectorAll()` 来选取页面内所有的 `.item` 类型的 `<div>` 元素，并返回一个静态 NodeList 集合。接着使用 `forEach` 对集合中的每一个成员执行循环，在每次迭代过程中访问单个元素的 `offsetHeight` 属性从而得到其实际渲染后的高度值[^3]。

值得注意的是，如果希望在某些特定条件下（比如图片加载完成之后）再测量高度，则可能需要结合其他技术手段如监听资源加载事件等进一步处理[^4]。

document.getElementsByClassName获取不同类名的元素

可以使用以下方法来获取不同类名的元素：

1. 使用querySelectorAll方法来选择多个类名：

var elements = document.querySelectorAll('.class1, .class2');

2. 使用getElementsByClassName方法来获取一个类名，然后再使用循环来检查是否包含其他类名：

var elements = document.getElementsByClassName('class1');
var result = [];
for (var i = 0; i < elements.length; i++) {
  if (elements[i].classList.contains('class2')) {
    result.push(elements[i]);
  }
}

这将返回所有具有class1和class2类名的元素。