在 DOM 元素上使用属性

DOM 在某些方面有点奇怪，处理属性的方式也不例外。有多种方法可以处理元素的属性。属性是指诸如 <div id="cool"></div> 中的 id 之类的东西。有时您需要 *设置* 它们。有时您需要 *获取* 它们。有时有特殊的辅助 API。有时没有。

在本文中，我将假设 el 是您 JavaScript 代码中的一个 DOM 元素。假设您已经执行了类似 const el = document.querySelector("#cool"); 的操作并匹配了 <div id="cool"> 或其他类似元素。

某些属性也是 DOM 对象本身的属性，因此，如果您需要设置 id 或 title，您可以执行以下操作

el.id; // "cool"
el.title = "my title";
el.title; // "my title";

其他类似工作的属性包括 lang、align 和所有主要事件，例如 onclick。

然后有一些属性与这些类似，但嵌套更深。style 属性就是这样。如果您记录 el.style，您将看到大量的 CSS 样式声明。您可以轻松地获取和设置它们

el.style.color = "red";
module.style.backgroundColor = "black";

您也可以通过这种方式获取计算后的颜色。如果您执行 module.style.color 希望立即获取元素的颜色，您可能无法获得它。为此，您需要执行以下操作

let style = window.getComputedStyle(el);
style.color; // whatever in CSS won out

但并非所有属性都像这样的第一类属性。

el['aria-hidden'] = true; // nope

这在设置属性方面“有效”，但它没有以正确的方式在 DOM 中设置它。相反，您必须使用适用于所有属性的通用 setter 和 getter 函数，例如

el.setAttribute("aria-hidden", true);
el.getAttribute("aria-hidden");

某些属性有特殊的辅助方法。最方便的是 用于类属性的 classList。对于像这样的元素

<div class="module big"></div>

您将拥有

el.classList.value; // "module big"
el.classList.length; // 2
el.classList.add("cool"); // adds the class "cool", so "module big cool"
el.classList.remove("big"); // removes "big", so "module cool"
el.classList.toggle("big"); // adds "big" back, because it was missing (goes back and forth)
el.classList.contains("module"); // true

还有更多，classList 本身也像数组一样，因此您可以对其进行 forEach 等操作。这是使用类的强大理由，因为 DOM API 周围非常方便。

另一种具有特殊辅助方法的属性类型是 data-*。假设您有

<div data-active="true" data-placement="top right" data-extra-words="hi">test</div> 

您有 dataset

el.dataset;
/*
{
  active: "true",
  "placement", "top right"
*/

el.dataset.active; // "true"
el.dataset.extraWords; // "hi", note the conversion to camelCase

el.dataset.active = "false"; // setters work like this