document.getElementClassName和 document.querySelectorAll

document.getElementClassName和 document.querySelectorAll都是用于获取HTML元素的方法，但它们有一些区别。

document.getElementClassName是一个旧的方法，用于通过类名获取元素。它返回一个HTMLCollection对象，该对象包含所有具有指定类名的元素。可以通过索引号来访问该集合中的元素。

document.querySelectorAll是一个相对较新的方法，它使用CSS选择器来选择元素。它返回一个NodeList对象，该对象包含所有与选择器匹配的元素。与HTMLCollection不同，NodeList是一个静态的集合，即使DOM结构发生变化，也不会自动更新。

由于querySelectorAll返回的是一个静态快照，它在处理大量元素时可能会比getElementClassName更快。而getElementClassName则更适用于只找到一个元素或较小的元素集合的情况。

相关问题

document.querySelectorAll和document.querySelector

这两个方法都是 JavaScript 中用于选择 DOM 元素的方法。

`document.querySelector` 方法返回文档中第一个匹配指定选择器的元素，如果找不到匹配的元素，则返回 null。

例如：

const element = document.querySelector('.example');

上面的代码会返回第一个 `class` 属性为 `example` 的元素。

`document.querySelectorAll` 方法返回文档中所有匹配指定选择器的元素，如果找不到匹配的元素，则返回空的 NodeList 对象。

例如：

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

上面的代码会返回所有 `class` 属性为 `example` 的元素的 NodeList 对象。

总之，`document.querySelector` 返回的是单个元素，而 `document.querySelectorAll` 返回的是多个元素的 NodeList 对象。

TypeError: document.querySelectorAll(...).getAttribute is not a function

This error occurs when you try to call the `getAttribute()` method on a NodeList returned by `querySelectorAll()` method. The `querySelectorAll()` method returns a collection of nodes that match a specified CSS selector, not a single element with an attribute.

To fix this error, you need to iterate over the NodeList using a loop and call the `getAttribute()` method on each element in the collection.

Here's an example:

const elements = document.querySelectorAll('.my-class');
elements.forEach(element => {
  const attributeValue = element.getAttribute('data-my-attribute');
  console.log(attributeValue);
});

In this example, we are selecting all elements with a class of `my-class`, iterating over the collection using the `forEach()` method, and calling the `getAttribute()` method on each element to retrieve the value of the `data-my-attribute` attribute.