JavaScript通过HTML的class来获取HTML元素的方法总结

当我们想要在JavaScript中获取HTML元素时，可以通过元素的类名（class）来获取。以下是通过HTML元素的类名来获取HTML元素的方法总结：

当我们想要在JavaScript中获取HTML元素时，可以通过元素的类名（class）来获取。以下是通过HTML元素的类名来获取HTML元素的方法总结：

1. 通过document.getElementsByClassName()方法获取HTML元素

我们可以使用 document.getElementsByClassName() 方法通过元素的类名来获取HTML元素。这个方法会返回一个包含所有符合条件的元素的类数组。如果没有符合条件的元素，则返回一个空数组。

下面是一个例子：

<!-- HTML代码 -->
<div class="myDiv">这是一个div元素</div>
<div class="myDiv">这是另一个div元素</div>

我们可以使用以下JavaScript代码来获取所有类名为myDiv的元素：

// JavaScript代码
var elements = document.getElementsByClassName("myDiv");
console.log(elements);

输出结果为：

HTMLCollection [div.myDiv, div.myDiv]

这个结果是一个类数组对象，我们可以使用正常的数组方法来访问它，例如使用elements[0]来访问第一个元素。

2. 通过querySelectorAll()方法获取HTML元素

我们还可以使用querySelectorAll()方法通过元素的类名来获取HTML元素。这个方法会返回一个包含所有符合条件的元素的静态 NodeList 对象。如果没有符合条件的元素，则返回一个空 NodeList 对象。

下面是一个例子：

<!-- HTML代码 -->
<div class="myDiv">这是一个div元素</div>
<div class="myDiv">这是另一个div元素</div>

我们可以使用以下JavaScript代码来获取所有类名为myDiv的元素：

// JavaScript代码
var elements = document.querySelectorAll(".myDiv");
console.log(elements);

输出结果为：

NodeList [div.myDiv, div.myDiv]

这个结果是一个静态 NodeList 对象，我们可以使用正常的数组方法来访问它，例如使用elements[0]来访问第一个元素。

以上就是JavaScript通过HTML的class来获取HTML元素的方法总结。希望能够帮助到你！