如何仅使用JavaScript通过样式类名来定位页面元素？

在JavaScript中，我们可以通过元素的样式类名（class name）来获取元素，这通常使用document.getElementsByClassName(names)方法或document.querySelectorAll(selectors)方法来实现。

使用getElementsByClassName 方法

getElementsByClassName 是 JavaScript 中的一个DOM方法，用于返回文档中所有具有指定类名的元素，这个方法接受一个参数，即你想要选择的类名，然后它会返回一个包含所有具有这个类名的元素的NodeList对象。

如果我们有一个HTML文档如下：

<div class="myClass">Hello</div>
<div class="myClass">World</div>
<div class="otherClass">!</div>

我们可以使用getElementsByClassName方法获取所有myClass的元素：

var elements = document.getElementsByClassName('myClass');
console.log(elements); // 输出： NodeList [div.myClass, div.myClass]

注意，getElementsByClassName返回的是一个实时的NodeList，这意味着如果DOM更新了，这个NodeList也会随之更新。

使用querySelectorAll 方法

另一种获取元素的方式是使用querySelectorAll方法，这个方法也接受一个参数，即CSS选择器，并返回一个包含匹配该选择器的所有元素的NodeList。

如果我们有同样的HTML文档，我们可以使用querySelectorAll方法获取所有myClass的元素：

var elements = document.querySelectorAll('.myClass');
console.log(elements); // 输出： NodeList [div.myClass, div.myClass]

与getElementsByClassName不同，querySelectorAll返回的NodeList是非实时的，这意味着即使DOM更新，NodeList也不会随之更新。

比较两种方法

下面是一个简单的比较表格，列出了两种方法的主要区别：

相关问题与解答

Q1: 如果页面上没有找到匹配的元素，这两种方法会返回什么？

A1: 如果页面上没有找到匹配的元素，这两种方法都会返回一个空的NodeList，在JavaScript中，你可以检查NodeList的长度来确定是否找到了元素。

var elements = document.getElementsByClassName('myClass');
if (elements.length === 0) {
    console.log('No elements found with the class "myClass".');
} else {
    console.log('Found ' + elements.length + ' elements with the class "myClass".');
}

Q2: 我可以使用这两种方法来获取具有多个类名的元素吗？

A2: 是的，你可以使用这两种方法来获取具有多个类名的元素，对于getElementsByClassName方法，你只需传入你想要选择的所有类名即可，对于querySelectorAll方法，你可以在CSS选择器中使用空格来选择具有多个类名的元素。

// 使用getElementsByClassName获取具有myClass和otherClass的元素
var elements = document.getElementsByClassName('myClass otherClass');
// 使用querySelectorAll获取具有myClass和otherClass的元素
var elements = document.querySelectorAll('.myClass.otherClass');