如何修改 DOM 中的属性、类和样式

最新推荐文章于 2025-04-04 23:40:48 发布

白如意i

最新推荐文章于 2025-04-04 23:40:48 发布

阅读量1.5k

点赞数 34

分类专栏： linux 文章标签：服务器 linux 运维

本文链接：https://blog.csdn.net/rubys007/article/details/142794598

版权

linux 专栏收录该内容

387 篇文章

订阅专栏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

简介

在本系列教程的上一篇文章《如何修改 DOM》中，我们介绍了如何使用内置方法在文档对象模型（DOM）中创建、插入、替换和删除元素。通过提高对DOM的操作熟练程度，您可以更好地利用JavaScript的交互能力并修改Web元素。

在本教程中，您将学习如何通过修改HTML元素节点的样式、类和其他属性来进一步改变DOM。这将使您更好地理解如何操作DOM中的重要元素。

选择元素的回顾

直到最近，一个名为jQuery的流行JavaScript库通常被用来选择和修改DOM中的元素。jQuery简化了选择一个或多个元素并同时对它们应用更改的过程。在《如何访问DOM中的元素》中，我们回顾了使用原生JavaScript来抓取和处理节点的DOM方法。

回顾一下，document.querySelector() 和 document.getElementById() 是用于访问单个元素的方法。使用下面的示例中带有 id 属性的 div，我们可以以任何一种方式访问该元素。querySelector() 方法更强大，因为它可以通过任何类型的选择器在页面上选择元素。

给定HTML：

<div id="demo-id">Demo ID</div>

我们可以使用 querySelector() 方法访问元素如下：

// 两种方法都将返回单个元素
const demoId = document.querySelector('#demo-id');

访问单个元素后，我们可以轻松地更新元素的一部分，比如其中的文本。

// 更改一个元素的文本
demoId.textContent = 'Demo ID text updated.';

然而，当通过一个常见选择器（例如特定类）访问多个元素时，您必须遍历列表中的所有元素。在下面的代码中，有两个具有相同类值的 div 元素。

<div class="demo-class">Demo Class 1</div>
<div class="demo-class">Demo Class 2</div>

您可以使用 querySelectorAll() 来抓取所有具有 demo-class 应用的元素，并使用 forEach() 遍历它们并应用更改。也可以通过 querySelectorAll() 访问特定元素，方式与数组一样——使用方括号表示法。

// 获取所有 .demo 元素的 NodeList
const demoClasses = document.querySelectorAll('.demo-class');

// 使用循环更改多个元素的文本
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// 访问NodeList中的第一个元素
demoClasses[0];

这是从jQuery转向原生JavaScript时需要注意的最重要的差异之一。重要的是要注意将这些方法和属性应用到多个元素的过程。

本教程涵盖了修改元素属性所使用的属性和方法。这些属性和方法通常会附加到事件侦听器上，以便响应点击、悬停或其他触发器。

修改属性

属性是包含有关HTML元素的附加信息的值。它们通常以名称/值对的形式出现，根据元素的不同可能是必不可少的。

一些最常见的HTML属性是 img 标签的 src 属性，a 标签的 href 属性，以及 class、id 和 style 属性。有关HTML属性的完整列表，请查看Mozilla开发者网络上的属性列表。不属于HTML标准的自定义元素将以 data- 或 aria- 开头。

在JavaScript中，我们有四种方法来修改元素属性：

方法	描述	示例
`hasAttribute()`	返回 `true` 或 `false` 布尔值	`element.hasAttribute('href');`
`getAttribute()`	返回指定属性的值或 `null`	`element.getAttribute('href');`
`setAttribute()`	添加或更新指定属性的值	`element.setAttribute('href', 'index.html');`
`removeAttribute()`	从元素中移除属性	`element.removeAttribute('href');`

让我们创建一个带有一个属性的新HTML文件，其中包含一个 img 标签。我们将链接到通过URL可用的公共图像，但如果您离线工作，可以将其替换为其他本地图像。

<!DOCTYPE html>
<html lang="en">
<body>

	<img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">

</body>

</html>

当您将上述HTML文件加载到现代Web浏览器中并打开内置的开发者控制台时，您应该看到类似于这样的内容：

!classes.html的第一次渲染

现在，您可以即时测试所有属性方法。

// 分配图像元素
const img = document.querySelector('img');

img.hasAttribute('src');                // 返回 true
img.getAttribute('src');                // 返回 "...shark.png"
img.removeAttribute('src');             // 移除 src 属性和值

此时，您已经移除了与 img 相关的 src 属性和值，但您可以使用 img.setAttribute() 重置该属性并将值分配给替代图像：

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');

!classes.html的第二次渲染

最后，我们可以通过将新值分配给元素的属性直接修改属性，将 src 设置回 shark.png 文件

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

任何属性都可以以这种方式进行编辑，以及使用上述方法。

hasAttribute() 和 getAttribute() 方法通常与条件语句一起使用，而 setAttribute() 和 removeAttribute() 方法用于直接修改DOM。

修改类

类属性对应于 CSS 类选择器。这不应与 ES6 类混淆，ES6 类是一种特殊类型的 JavaScript 函数。

CSS 类用于将样式应用于多个元素，而 ID 只能在页面中存在一次。在 JavaScript 中，我们有 className 和 classList 属性来处理类属性。

方法/属性	描述	示例
`className`	获取或设置类值	`element.className;`
`classList.add()`	添加一个或多个类值	`element.classList.add('active');`
`classList.toggle()`	切换类的打开或关闭状态	`element.classList.toggle('active');`
`classList.contains()`	检查类值是否存在	`element.classList.contains('active');`
`classList.replace()`	用新的类值替换现有的类值	`element.classList.replace('old', 'new');`
`classList.remove()`	移除一个类值	`element.classList.remove('active');`

创建另一个 HTML 文件，以使用类方法包含两个元素和一些类。此外，包含内联 CSS 样式表以提供一些样式，以帮助我们查看我们的工作结果。

<!DOCTYPE html>
<html lang="en">

<style>
	body {
		max-width: 600px;
		margin: 0 auto;
		font-family: sans-serif;
	}
	.active {
		border: 2px solid blue;
	}

	.warning {
		border: 2px solid red;
	}

	.hidden {
		display: none;
	}

	div {
		border: 2px dashed lightgray;
		padding: 15px;
		margin: 5px;
	}
</style>

<body>

	<div>Div 1</div>
	<div class="active">Div 2</div>

</body>

</html>

当你在 web 浏览器中打开 classes.html 文件时，你应该会收到类似以下的渲染：

!classes.html 的第一次渲染

className 属性是为了防止与 JavaScript 和其他具有 DOM 访问权限的语言中的 class 关键字发生冲突而引入的。你可以使用 className 直接为类分配一个值。

// 选择第一个 div
const div = document.querySelector('div');

// 将警告类分配给第一个 div
div.className = 'warning';

通过将 CSS 中定义的 warning 类分配给第一个 div，你将得到以下输出：

!classes.html 的第二次渲染

修改类的另一种方法是通过 classList 属性，它带有一些有用的方法。这些方法类似于 jQuery 的 addClass、removeClass 和 toggleClass 方法。

// 通过类名选择第二个 div
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden');                // 添加 hidden 类
activeDiv.classList.remove('hidden');             // 移除 hidden 类
activeDiv.classList.toggle('hidden');             // 在 true 和 false 之间切换 hidden
activeDiv.classList.replace('active', 'warning'); // 用 warning 类替换 active 类

执行上述方法后，你的网页将如下所示：

!classes.html 的最终渲染

因为 activeDiv 元素仍然应用了 hidden 类，所以它不会显示在页面上。

与 className 示例不同，使用 classList.add() 将向现有类列表中添加一个新类。你还可以将多个类作为逗号分隔的字符串添加。还可以使用 setAttribute 来修改元素的类。

修改样式

样式属性表示 HTML 元素上的内联样式。通常，样式将通过样式表应用到元素，就像本文中之前所做的那样，但有时你需要直接添加或编辑内联样式。

创建一个新文件，以演示使用 JavaScript 编辑样式。使用下面的内容，其中一个 div 应用了一些内联样式来显示一个正方形。

<!DOCTYPE html>
<html lang="en">

<body>

	<div style="height: 100px;
	            width: 100px;
	            border: 2px solid black;">Div</div>

</body>

</html>

在 web 浏览器中打开 styles.html 时，它会看起来像这样：

!styles.html 的第一次渲染

编辑样式的一种选项是使用 setAttribute()。

// 选择 div
const div = document.querySelector('div');

// 将样式应用于 div
div.setAttribute('style', 'text-align: center');

然而，这将从元素中删除所有现有的内联样式。由于这可能不是预期的效果，最好直接使用 style 属性

div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';

CSS 属性以 kebab-case 编写，即小写单词用破折号分隔。然而，kebab-case CSS 属性不能在 JavaScript 的 style 属性上使用，因为破折号 - 用于减法。相反，它们将被替换为它们的 camelCase 等效形式，即第一个单词小写，所有后续单词大写。换句话说，不要使用 text-align，而要使用 JavaScript 的 style 属性中的 textAlign。

// 将 div 变成圆形并垂直居中文本
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';