在 JavaScript 中根据类名获取元素
-
使用 Javascript
.getElementsByClassName()函数根据其 CSS 类名称获取元素 -
使用 Javascript
.querySelector()函数获取基于 CSS 类名的元素 -
使用
.querySelectorAll()函数根据 CSS 类名获取多个 HTML 元素
我们可能需要从 DOM 中查询元素以在运行时动态更改其样式。Javascript 有各种内置函数可以满足我们的目的。其中最著名的是 .getElementById()。但是 .getElementById() 仅返回一个元素，即第一个元素，其 HTML id 与传递给函数的参数相匹配。如果我们要同时更改多个元素的样式，.getElementById() 函数方法可能会很麻烦。它将涉及向 HTML 元素添加多个 id 并一次查询一个。我们能否以更好的方式做到这一点？以下部分详细说明了根据 DOM 的 CSS 类名从 DOM 中获取元素的方法。
使用 Javascript .getElementsByClassName() 函数根据其 CSS 类名称获取元素
Javascript 有一个内置方法 .getElementsByClassName()，它使我们能够根据 CSS 类名查询多个 HTML 元素。它是 Document 接口中可用的方法，通常用于它，如 document.getElementsByClassName()。该函数将在文档（DOM）中搜索具有函数参数中指定的 CSS 类名称的所有元素。
根据 MDN Docs，该函数返回 HTML 元素的实时集合。这意味着如果有直接修改 DOM 元素的代码片段，则 getElementsByClassName() 函数返回的元素可能会在运行时被修改。
getElementsByClassName 语法
let el = document.getElementsByClassName(cssClassName);
cssClassName 应该是表示所需 CSS 类的字符串。如果有多个 CSS 类，我们可以用空格分隔它们（如 css-class1 css-class2 等）
getElementsByClassName 参数
该函数采用一个参数，即 CSS 类名。在某些情况下，我们可能需要 CSS 类名称的组合来选择一个元素。在这种情况下，我们可以传递多个以空格分隔的 CSS 类名。
例子
让我们参考以下代码来了解其功能。
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.getElementsByClassName('bold');
console.log(els);
}
输出：
HTMLCollection(2) [div.bold, div.bold]
上面的代码将在控制台中记录一组 HTML 元素。谷歌浏览器控制台将显示如上所示的输出。在 window.onload 中编写 document.getElementsByClassName("bold") 代码可确保代码仅在 HTML 呈现后运行。请注意，与 .getElementById() 函数不同，getElementsByClassName() 函数会重新运行 HTML 元素数组。我们不能像处理 .getElementById() 那样直接处理由 getElementsByClassName() 输出的元素。如果我们要将上面代码中的 bold 样式更改为第一个元素的普通样式，我们可以使用以下代码。
let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';
使用 Javascript .querySelector() 函数获取基于 CSS 类名的元素
getElementsByClassName() 是一种广泛使用的方法，仅限于根据 CSS 类名选择 HTML 元素。Javascript 在 Document 接口中有另一个可用的内置函数，querySelector()，它本质上更通用。它可用于根据元素的 CSS 类名查询元素。此功能只是 querySelector() 实际功能的一个子集。Javascript querySelector() 函数与 .getElementById() 类似，因为它返回满足在其参数中传递的选择参数的第一个元素。
.querySelector() 语法
语法类似于 .getElementsByClassName()。
let el = document.querySelector('.cssQuerySelector');
.querySelector() 参数
querySelector() 接受字符串数据类型作为表示 css 查询选择器 的参数。与我们使用 CSS 选择器将特定样式应用于所选元素的方式相同。它包括 #<id> 根据其 id 选择一个 HTML 元素，.<css-class-name> 根据其 CSS 样式类名称选择一个元素，甚至是两者的组合，如 #<id>.<css-class-name>，可以用来选择一个元素。
例子
下面的代码解释了 .querySelector() 的用法。
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.querySelector('.bold');
console.log(els);
}
输出：
<div class="bold">Element 1: Bolder text</div>
输出与在 google chrome 浏览器控制台中显示的一样。请注意，.querySelector() 函数只返回一个 HTML 元素，而 .getElementsByClassName() 则返回一组元素。因此，如果我们要处理它，我们可以直接将更改应用于它。比如我们要把选中元素的字体改成普通字体，可以用下面的代码来实现。
window.onload = function() {
let els = document.querySelector('.bold');
els.style.fontWeight = '100';
}
使用 .querySelectorAll() 函数根据 CSS 类名获取多个 HTML 元素
顾名思义，Javascript 中的 .querySelectorAll() 函数返回满足选择条件的 HTML 元素集合。就像 .querySelector() 一样，querySelectorAll() 接受 CSS 查询选择器字符串作为其参数。它返回非活动的 HTML 元素的静态列表。它的行为类似于 .getElementsByClassName()，因为它返回基于它查询的多个 HTML 元素，但不限于它。就像 querySelector() 一样，我们可以使用 .querySelectorAll() 根据元素的 id 或 CSS 类名来获取元素。就像我们在 CSS 样式表中使用查询选择器选择元素一样。
.querySelectorAll() 语法
document.querySelectorAll('<css-selector-string>');
.querySelectorAll() 参数
该函数接受一个 CSS 查询字符串作为其唯一的输入参数。要根据 id 选择元素，我们必须使用参数 #<id>。对于基于 CSS 类名的选择，它应该是 .<css-class-name>。对于两者的组合，我们可以使用 #<id>.<css-class-name> 格式。
例子
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
console.log(els);
输出：
NodeList(2)
0: div.bold
1: div.bold
输出是一个节点列表类型的数组。我们可以通过从数组中选择它们并根据需要更改它们的 CSS 类值来进一步处理这些节点。一个示例如以下代码所示。els[0].style.fontWeight = "100"; 将使第一个选定的 HTML 节点变为正常字体粗细。
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);
输出：
NodeList(2)
0: div.bold
1: div.bold