在 JavaScript 中根据类名获取元素

Nithin Krishnan 2023年1月30日 2021年11月20日
  1. 使用 Javascript .getElementsByClassName() 函数根据其 CSS 类名称获取元素
  2. 使用 Javascript .querySelector() 函数获取基于 CSS 类名的元素
  3. 使用 .querySelectorAll() 函数根据 CSS 类名获取多个 HTML 元素
在 JavaScript 中根据类名获取元素

我们可能需要从 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