Javascript

Javascript 中更改元素的类-className和classList

Posted by cl9000 on June 08, 2021

那些疯狂到认为自己能够改变世界的人，才能真正改变世界。——<史蒂夫·乔布斯>

原文链接：https://stackabuse.com/how-to-change-elements-class-with-javascript-classname-and-classlista

介绍

HTML 中的 class 属性用于为一个或多个 HTML 元素定义一个类。这样，很多元素可以属于同一类元素并在样式表中共享相同的样式，因此您不必一遍又一遍地为每个元素编写相同的样式。
话虽如此，有时您希望根据用户的输入动态更改样式。例如，您想为您的网页实现白天/黑夜模式，这可以通过更改元素的类来有效地完成。

当您想让用户自定义应用程序的任何方面时，这是一项常见任务。在本指南中 - 我们将看看如何在 JavaScript 中更改 HTML 元素的类。

DOM树

DOM 或 文档对象模型（Document Object Model） 是创建从XML或HTML的树结构的接口。文档元素的层次结构通过DOM表示。一棵树由节点和分支组成，其中元素是节点，元素之间的关系是分支。在 DOM 树中，根节点是html——开始标记 HTML 文档所需的第一个元素：

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
<head>
    <title>Web page title</title>
</head>
<body>
    <h1>Some heading</h1>
</body>
</html>

此页面的 DOM 树将如下所示：

1
2
3
4
5
6
7
- root element <html>
    - element <head>
        - element <title>
            - text "Web page title"
    - element <body>
        - element <h1>
            - text "Some heading"

这是一个非常简单的树，但同样的过程适用于任何任意复杂的页面。多亏了 DOM 树，通过 JavaScript，我们可以访问页面上的所有 HTML 元素，以及元素的class、id、内容及其所有属性。我们甚至可以添加新元素并删除旧元素。我们可以创建事件来监听和响应它们（即当点击按钮时改变背景颜色）。

获取元素

现在我们知道我们可以从 HTML 获取一个元素，让我们看看如何使用 JavaScript实际做到这一点。要更改元素的类，我们首先必须检索它。根据元素的不同，我们可以通过几种不同的方法获取它们：

  • getElementsByClassName(class_name) - 返回HTMLCollection包含类名等于 HTML 元素的 class_name。
  • getElementById(id_name) - 返回一个 id 等于 HTML 元素 id_name。
  • getElementsByTagName(tag_name) - 返回一个 HTMLCollection 带有标签的元素 tag_name。

我们将使用这个 HTML 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<head>
    <title>Web page title</title>
</head>
<body class="page-body">
true<h1 class="headings">Some heading</h1>
    <h3 class="headings">More of some heading</h3>
    <h5 class="headings">Another heading here</h5>
    
    <a href="https://www.google.com" id="link-to-google">Some random link</a>
    <ul>
        <li>Thing #1</li>
        <li>Thing #2</li>
        <li>Thing #3</li>
    </ul>
    
</body>
    <script src="script.js"></script>
</html>

使用getElementsByClassName()获取元素

我们制作 script.js 导入到我们页面的文件：

1
$ touch script.js

在其中 - 我们将定位并检索属于“headings”的元素class：

1
console.log(document.getElementsByClassName("headings"));

由于可能有多个元素属于同一类 - 这将返回一个HTMLCollection：

1
2
3
4
5
HTMLCollection(3)
true- 0: h1.headings
true- 1: h3.headings
true- 2: h5.headings
truelength: 3

HTMLCollection 是 HTML 元素的集合，它提供了多种从集合中选择它们的方法，例如：

  • className()- 返回一个代表类名的字符串；这个方法也可以用来设置元素的类（这正是我们需要的）。
  • innerHTML() - 由于 HTML 元素可以相互嵌套，如果有嵌套元素，此方法会将它们作为 HTML 返回。
  • innerText() - 返回元素内的所有文本（包括嵌套元素）。

还有很多我们可以监听的事件，例如：onclick, ondblclick, onkeydown, onkeypress。可以在官方文档中找到有关 JavaScript 事件的更多信息。
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

使用getElementById()获取元素

您可以通过以下方法getElementById() 获取元素 id ：

1
2
3
console.log(document.getElementById("link-to-google"));
// 结果是
<a href="https://www.google.com" id="link-to-google">Some random link</a>

使用getElementsByTagName()获取元素

最后，如果元素没有 class 或 id ，我们还可以通过它们的 tag 找到元素。这将返回一组 HTML 元素，因为通常有多个具有相同标签的元素。
现在，如果我们想获取所有<li>元素，我们可以通过 li 标签进行搜索：

1
2
3
4
5
6
console.log(document.getElementsByTagName("li"));
// 结果是：
HTMLCollection(3) [li, li, li]
true- 0: li
true- 1: li
true- 2: li

getElementsByClassName 返回值是一样的 - 一个 HTMLCollection。
无论用于获取元素的方法如何 - 我们现在都可以更改它的类。

使用 JavaScript 更改元素的类

使用className更改元素类

让我们创建一个 index.html 包含一些数据的虚拟页面。我们将允许用户在“白天模式”和“夜间模式”之间切换，这会改变网页上使用的调色板。我们还需要在 script.js 此处导入一个文件来查找和更改元素，以及一个 style.css 包含所有样式代码的文件。

让我们从以下开始index.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
    <title>Day/night mode</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body class="page-body-day" id="page-body">

	<h1 class="main-heading-day" id="main-heading">Some heading</h1>
    <p>Dummy text, dummy text, dummy text</p>
    <p>Some more dummy text, more dummy text, more dummy text</p>
    

    <button onclick="switchMode()">Switch day/night mode</button>
</body>
    
<script src="script.js"></script>
</html>

当用户单击“切换日/夜模式”按钮时，所有将改变其外观的元素都有各自的id并分别分配了默认 element-day 类。

每个 element-day 类 element-night 在 style.css 文件中都有一个替代项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.page-body-day {
    background-color: white;
    color: black;
}
.page-body-night {
    background-color: #02182B;
    color: yellow;
}
.main-heading-day {
    color: black;
}
.main-heading-night {
    color: yellow;
}

由于我们将更改元素的类，因此我们不想按类进行搜索，否则会出现边缘情况。我们将要搜索某个固定值的东西，即 id，然后检查该 className元素的 - 在该过程中将其更改为适当的类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function switchMode(){
    // Body switching
    if(document.getElementById("page-body").className == "page-body-day"){
        document.getElementById("page-body").className = "page-body-night";
    }else{
        document.getElementById("page-body").className = "page-body-day";
    }
    // Heading switching
    if(document.getElementById("main-heading").className == "main-heading-day"){
        document.getElementById("main-heading").className = "main-heading-night";
    }else{
        document.getElementById("main-heading").className = "main-heading-day";
    }
}

在className返回类元素的名称。但是，如果我们为其分配一个新值 - 我们可以有效地更新class标签的属性。如果元素有一个element-day类，我们将其更改为element-night，反之亦然。
当color在 CSS 中改变 body 的属性时，我们会自动改变所有没有 color 定义属性的元素（在我们的例子中是我们的<p>标签）。当类切换发生时，CSS 开始读取新切换的类并相应地应用样式。
不过，这种方法不是很现代，主要用于适应 Internet Explorer 8 和 9 的滞后功能。

使用classList更改元素类

较新的 Internet 浏览器支持名为 classList. 此属性提供的是应用于某个 HTML 元素的所有类的列表。

注意： Internet Explorer 8 和 9 不支持classList.

classList 有几种方法可以利用：

  • add(class_name) - class_name 在列表中添加一个新类。
  • remove(class_name) - class_name 从列表中删除一个类。
  • toggle(class_name) - class_name 如果尚未添加，则添加类，否则将其删除。
  • contains(class_name) - 检查是否 class_name 在应用于 HTML 元素的类列表中。

话虽如此 - 我们可以重写script.js文件以使用这些方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function switchMode(){    
    // Body switching
    if(document.getElementById("page-body").classList.contains("page-body-day")){
        document.getElementById("page-body").classList.remove("page-body-day");
        document.getElementById("page-body").classList.add("page-body-night");
    } else{
        document.getElementById("page-body").classList.remove("page-body-night");
        document.getElementById("page-body").classList.add("page-body-day");
    }
    // Heading switching
    if(document.getElementById("main-heading").classList.contains("main-heading-day")){
        document.getElementById("main-heading").classList.remove("main-heading-day");
        document.getElementById("main-heading").classList.add("main-heading-night");
    } else{
        document.getElementById("main-heading").classList.remove("main-heading-night");
        document.getElementById("main-heading").classList.add("main-heading-day");
    }
}

这种方法在 HTML5 和现代浏览器中得到支持，通过这种方式，您可以以类似于jQuery 的方式操作类 - 一个广泛用于操作 HTML 元素、事件等的 JavaScript 库。

通过 classList，您可以跳过包含减少**PLT（页面加载时间）**的外部库，PLT（页面加载时间） 最近已成为SEO 分级的重要Web 重要信号。

结论

JavaScript 获得了大量采用，因为 DOM 使得它可以非常简单地操作网页上的所有内容，等等。

在本教程中，我们研究了如何在 JavaScript 中更改元素的类。

参考

关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
Javascript
FRIENDS