修改 DOM 元素属性

在学习了如何触发事件和访问 DOM 元素属性之后，我们来看一下如何修改它们。修改 DOM 元素属性是实现交互式页面的途径之一，我们可以通过 JavaScript 修改现有 DOM 属性的内容，从而在用户交互后，例如点击按钮，或者从后台请求数据之后，把新的内容更新到页面上。

修改 DOM 属性的方式

修改 DOM 属性和访问 DOM 属性几乎一样，在访问属性的基础上，直接使用 = 赋值即可：

inputText.value = "test";

对于 classList 和 data-，以及 attribute方式也有对应的修改方法，接下来我们分别看一下。

直接修改 DOM 对象属性

与访问 DOM 属性一样，这也是最常见、最推荐的方式。下面的例子：

• 定义了一个 range 类型的 input 滑动条。
• 设置最小值为 0，最大值为 100，当前值为 80。
• 然后有一个按钮可以把它的值调至最大。

在 JavaScript 中，我们获取滑动条和按钮的实例，然后给按钮添加了 click 事件监听，在里边设置滑动条的 value 属性值为 max 属性的值，即最大值，这里我们同时使用了获取 DOM 属性和修改 DOM 属性的语法。

<input id="progress" type="range" min="0" max="100" value="80">
<button id="btnMax">调至最大</button>
<script>
  const progress = document.getElementById('progress');
  const btnMax = document.getElementById('btnMax');
  btnMax.addEventListener('click', () => {
    progress.value = progress.max;
  });
</script>

预览：

使用 setAttribute()

第二种方式是使用 DOM 实例的 setAttribute() 方法，与 getAttribute() 相对，用于修改属性。不过仍然需要注意，与getAttribute() 方法类似，它只是修改 HTML 文档中，对应元素的值，也就是我们写代码的时候，指定的字符串，修改的结果并不会同步到 DOM 属性中，例如上边同样的例子，直接点击“调至最大”按钮，可以把 value 属性设置为 100，但是只能设置一次，后面再修改了 value 属性，再点击按钮就没用了（因为在 HTML 代码中 value 已经设置为了 100），并且如果一开始就滑动修改了 value 属性，再点击按钮也不会生效：

<input id="progress" type="range" min="0" max="100" value="80">
<button id="btnMax">调至最大</button>
<script>
  const progress = document.getElementById('progress');
  const btnMax = document.getElementById('btnMax');
  btnMax.addEventListener('click', () => {
    progress.setAttribute('value', progress.max);
  });
</script>

预览：

通过浏览器开发者工具可以观察这一现象。

setAttribute 对于 value 这种既可以由用户修改，也可以由代码修改的属性，会有这样的情况，但是对于修改其他静态的属性，例如 class、title 等不会有这种问题。

修改 Class 列表

对于 class 列表，我们可以通过 DOM 属性或 setAttribute() 修改：

<p id="text" class="text red">这是一个段落</p>

<script>
const text = document.getElementById("text");

text.className = "paragraph blue";
// 或
text.setAttribute("class", "primary green");

</script>

对于使用 clasList 的方式，我们可以在返回的结果中，调用 add() 来添加 class，调用 remove() 来删除 class：

<p id="text" class="text red">这是一个段落</p>

<script>
const text = document.getElementById("text");

text.classList.add("blue");
text.classList.remove("red");

</script>

获取 Style

对于内联样式属性，可以直接使用 = 赋值：

<p id="text" style="background-color: grey; color:white">这是一个段落</p>

<script>
const text = document.getElementById("text");

text.style.color = "lightblue";
text.style["background-color"] = "black";

</script>

设置自定义的 data 属性

对于自定义的 data-* 属性，我们也可以像类似于 style 属性一样的方式，使用 dataset 对象来修改具体的某个属性。如果要删除一个自定义属性，可以使用 delete 运算符：

<p id="text" data-next="新的内容" data-prev-content="旧的内容">这是一个段落</p>

<script>
const text = document.getElementById("text");

text.dataset.next = "下一篇内容";
delete text.dataset.prevContent;

</script>

这个就是修改 DOM 对象属性的方法，大体上和访问 DOM 属性一样：

• 直接修改 DOM 属性可以使用 =。
• 使用 setAttribute 方法。
• 修改 class 可以使用 classList 的 add() 和 remove() 方法。
• 内联样式可以修改 style 对象中的属性。
• 自定义的 data-* 属性，可以通过 dataset 中对应的属性修改。