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

介绍

在本系列的上一个教程“如何更改 DOM”中，我们介绍了如何从文档对象模型 (DOM ) 使用内置方法。通过提高操作 DOM 的熟练程度，您将能够更好地利用 JavaScript 的交互功能并修改 Web 元素。

在本教程中，我们将学习如何通过修改 HTML 元素节点的样式、类和其他属性来进一步改变 DOM。这将使您对如何操作 DOM 中的基本元素有更深入的了解。

选择元素的回顾

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

回顾一下，document.querySelector() 和 document.getElementById() 是用于访问单个元素的方法。在下面的示例中使用带有 id 属性的 div，我们可以通过任何一种方式访问该元素。

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

querySelector() 方法更健壮，因为它可以通过任何类型的选择器选择页面上的元素。

// Both methods will return a single element
const demoId = document.querySelector('#demo-id');

访问单个元素，我们可以轻松地更新元素的一部分，例如里面的文本。

// Change the text of one element
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() 访问特定元素，就像使用数组一样——使用括号表示法。

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');

// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// Access the first element in the NodeList
demoClasses[0];

这是从 jQuery 升级到 vanilla JavaScript 时需要注意的最重要的区别之一。许多修改元素的示例不会解释将这些方法和属性应用于多个元素的过程。

本文中的属性和方法通常会附加到事件侦听器以响应单击、悬停或其他触发器。

注意： 方法 getElementsByClassName() 和 getElementsByTagName() 将返回 HTML 集合，它们无法访问 querySelectorAll() 具有的 forEach() 方法。在这些情况下，您将需要使用标准的 for 循环来遍历集合。

修改属性

属性是包含有关 HTML 元素的附加信息的值。它们通常以 名称/值 对的形式出现，并且可能是必不可少的，具体取决于元素。

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

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

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

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

属性.html

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

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

</body>

</html>

当您将上述 HTML 文件加载到现代 Web 浏览器中并打开内置的 Developer Console 时，您应该会看到如下内容：

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

// Assign image element
const img = document.querySelector('img');

img.hasAttribute('src');                // returns true
img.getAttribute('src');                // returns "...shark.png"
img.removeAttribute('src');             // remove the src attribute and value

此时，您将删除与 img 关联的 src 属性和值，但您可以重置该属性并使用 img.setAttribute() 将值分配给备用图像：

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

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

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

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

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

修改类

class 属性对应于 CSS 类选择器。不要与 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 文件来使用类方法，其中包含两个元素和一些类。

类.html

<!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 文件时，您应该会收到类似于以下内容的渲染：

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

// Select the first div
const div = document.querySelector('div');

// Assign the warning class to the first div
div.className = 'warning';

我们已将 classes.html 的 CSS 值中定义的 warning 类分配给第一个 div。您将收到以下输出：

请注意，如果元素上已经存在任何类，这将覆盖它们。您可以使用 className 属性添加多个以空格分隔的类，或者在不使用赋值运算符的情况下使用它来获取元素上类的值。

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

// Select the second div by class name
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden');                // Add the hidden class
activeDiv.classList.remove('hidden');             // Remove the hidden class
activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class

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

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

修改样式

style 属性表示 HTML 元素的内联样式。通常，样式将通过样式表应用于元素，就像我们在本文前面所做的那样，但有时我们必须直接添加或编辑内联样式。

我们将制作一个简短的示例来演示使用 JavaScript 编辑样式。下面是一个带有 div 的新 HTML 文件，其中应用了一些内联样式来显示正方形。

样式.html

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

<body>

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

</body>

</html>

在 Web 浏览器中打开时，styles.html 将如下所示：

编辑样式的一种方法是使用 setAttribute()。

// Select div
const div = document.querySelector('div');

// Apply style to 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 样式属性。相反，它们将被替换为等效的驼峰式，即第一个单词是小写的，而所有后续单词都是大写的。换句话说，我们将使用 textAlign 代替 text-align 作为 JavaScript 样式属性。

// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

完成以上样式修改后，你的 styles.html 最终渲染会显示一个圆圈：

如果要对一个元素应用许多样式更改，最好的做法是将样式应用到一个类并添加一个新类。但是，在某些情况下，修改内联样式属性是必要的或更直接的。

结论

HTML 元素通常以属性的形式分配给它们的附加信息。属性可能由名称/值对组成，一些最常见的属性是 class 和 style。

在本教程中，我们学习了如何使用纯 JavaScript 访问、修改和删除 DOM 中 HTML 元素的属性。我们还学习了如何在元素上添加、删除、切换和替换 CSS 类，以及如何编辑内联 CSS 样式。如需进一步阅读，请查看 Mozilla Developer Network 上有关 attributes 的文档。