Attributes and properties

当浏览器加载页面，它“读取”(换句话说:“解析”)HTML并从中生成DOM对象时。对于元素节点来说，大多数标准HTML attributes自动成为DOM对象的 properties。

例如，如果有个标签是 <body id="page">，那么DOM对象会有 body.id="page"。

但是 attribute-property 映射不是一一对应的! 在本章中，我们将注意区分这两个概念，看看如何使用它们，何时它们是相同的，何时还是不同的。

DOM properties

我们已经看到了内置的DOM properties, 有很多。但技术上没有人限制我们，如果不够，我们可以添加我们自己的。

DOM节点是常规的JavaScript对象。我们可以改变它们。

例如，让我们在 document.body 中创建一个新 property :

document.body.myData = {name: 'Caesar',title: 'Imperator'
};alert(document.body.myData.title); // Imperator

我们也可以添加一个方法:

document.body.sayTagName = function() {alert(this.tagName);
};document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)

我们还可以修改像 Element.prototype 这样的内置原型, 并且向所有元素添加新的方法:

Element.prototype.sayHi = function() {alert(`Hello, I'm ${this.tagName}`);
};document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY

因此，DOM properties 和方法的行为与常规JavaScript对象类似:

它们可以有任何价。
它们是区分大小写的(是 elem.nodeType, 而不是 elem.NoDeTyPe )。

HTML attributes

在HTML中，标签可能有 attributes。当浏览器解析HTML并创建DOM对象时，它识别标准 attributes 并根据这些 attributes 创建DOM properties。

例如:

<body id="test" something="non-standard"><script>alert(document.body.id); // test// 非标准attribute不会产生propertyalert(document.body.something); // undefined</script>
</body>

请注意，一个元素的标准 attribute 对另一个元素可能是未知的。例如，"type"是 <input> 的标准 attribute，但不是 <body> 的标准 attribute。标准 attributes 在相应元素类的规范中进行了描述。

<body id="body" type="..."><input id="input" type="text"><script>alert(input.type); // textalert(body.type); // undefined: DOM property 没有创建, 因为这是非标准的</script>
</body>

因此，如果一个 attribute 是非标准的，那么它就不会有一个DOM-property。有办法访问这些属性吗?

当然有。所有 attributes 都可以通过以下方法访问:

elem.hasAttribute(name) – 检查存在。
elem.getAttribute(name) – 得到值。
elem.setAttribute(name, value) – 设置值。
elem.removeAttribute(name) – 移除 attribute。

这些方法与HTML中编写的内容完全一致。

还可以使用 elem.attributes 读取所有 attributes : 属于内置 Attr 类, 具有 name 和 value properties 的对象集合。

下面是一个读取非标准 property 的演示:

<body something="non-standard"><script>alert(document.body.getAttribute('something')); // non-standard</script>
</body>

HTML attributes 具有以下特点:

名称不区分大小写( id 与 ID 相同)。
它们的值总是字符串。

下面是一个使用 attributes 的扩展演示:

<body><div id="elem" about="Elephant"></div><script>alert( elem.getAttribute('About') ); // (1) 'Elephant', 读elem.setAttribute('Test', 123); // (2), 写alert( elem.outerHTML ); // (3), 查看这个attribute是否存在HTML中(yes)for (let attr of elem.attributes) { // (4) list allalert( `${attr.name} = ${attr.value}` );}</script>
</body>

请注意:

getAttribute('About') – 第一个字母在这里是大写的，而在HTML中都是小写的。但这并不重要: attribute 名是不区分大小写的。
我们可以给一个 attribute 赋值任何东西，但它会变成一个字符串。所以这里我们有 “123” 作为值。
所有的 attributes，包括我们设置的 attributes，都在 outerHTML 中可见。
attributes 集合是可迭代的，并将元素的所有 attributes (标准的和非标准的) 作为具有 name 和 value properties 的对象。

Property-attribute 同步

当一个标准 attribute 发生变化时，相应的 property 会自动更新，反之亦然(有些例外)。

在下面的示例中，id 作为一个 attribute 被修改，我们可以看到 property 也发生了改变。反之亦然:

<input><script>let input = document.querySelector('input');// attribute => propertyinput.setAttribute('id', 'id');alert(input.id); // id (updated)// property => attributeinput.id = 'newId';alert(input.getAttribute('id')); // newId (updated)
</script>

但也有例外，比如 input.value 只从 attribute → property 同步，而不会反向同步:

<input><script>let input = document.querySelector('input');// attribute => propertyinput.setAttribute('value', 'text');alert(input.value); // text// NOT property => attributeinput.value = 'newValue';alert(input.getAttribute('value')); // text (not updated!)
</script>

在上面的示例说明:

更改 attribute 值会更新 property。
但是 property 更改不会影响 attribute 。

这个“特性”实际上可能会派上用场，因为用户的操作可能会导致值的更改，在这些更改之后，如果我们想从HTML中恢复“原始”值，它就在 attribute 中。

DOM properties 是有类型的

DOM properties 并不总是字符串。例如，input.checked 的 property (用于复选框)是一个布尔值:

<input id="input" type="checkbox" checked> checkbox<script>alert(input.getAttribute('checked')); // attribute 值是: 空字符串alert(input.checked); // property 值是: true
</script>

还有其他的例子。 style 的 attribute 是一个字符串，但是 style 的 property 是一个对象:

<div id="div" style="color:red;font-size:120%">Hello</div><script>// stringalert(div.getAttribute('style')); // color:red;font-size:120%// objectalert(div.style); // [object CSSStyleDeclaration]alert(div.style.color); // red
</script>

不过，大多数 properties 都是字符串。

很少情况下，即使DOM property 类型是字符串，它也可能与 attribute 不同。例如，href 的 DOM property 总是一个完整的URL，即使该 attribute 是一个相对URL或只是一个 #shah。

这里有一个例子:

<a id="a" href="#hello">link</a>
<script>// attributealert(a.getAttribute('href')); // #hello// propertyalert(a.href ); // full URL in the form http://site.com/page#hello
</script>

如果我们需要 href 或任何其他 attribute 的值完全符合HTML中所写的，我们可以使用 getAttribute。

非标准 attributes 和 dataset

在编写HTML时，我们使用了很多标准 attributes 。但非标准的，定制的呢?首先，让我们看看它们是否有用? 对什么有用?

有时，非标准 attributes 用于将定制数据从HTML传递到 JavaScript，或者为JavaScript“标记”HTML元素。

像这样:

<!-- 标记此 div 用来显示 name -->
<div show-info="name"></div>
<!-- 这个显示 age -->
<div show-info="age"></div><script>// 该代码找到一个带有标记的元素，并显示所请求的内容let user = {name: "Pete",age: 25};for(let div of document.querySelectorAll('[show-info]')) {// 在字段中插入相应的信息let field = div.getAttribute('show-info');div.innerHTML = user[field]; // first Pete into "name", then 25 into "age"}
</script>

它们还可以用于 style 一个元素。

例如，这里的订单状态使用了order-state 这个 attribute :

<style>/* 样式依赖于自定义属性 "order-state" */.order[order-state="new"] {color: green;}.order[order-state="pending"] {color: blue;}.order[order-state="canceled"] {color: red;}
</style><div class="order" order-state="new">A new order.
</div><div class="order" order-state="pending">A pending order.
</div><div class="order" order-state="canceled">A canceled order.
</div>

为什么使用 attribute 会比拥有像 .order-state-new、.order-state-pending、.order-state-canceled 这样的类更可取呢?

因为 attribute 更方便管理。状态可以很容易地改变:

// 比删除旧类/添加新类更简单
div.setAttribute('order-state', 'canceled');

但是自定义 attributes 可能存在一个问题。如果我们为了我们的目的使用一个自认为的非标准 attribute，但是标准已经引入了它，并让它做一些事情，那会怎样?HTML语言是活的，它在发展，越来越多的 attributes 似乎适合开发人员的需要。在这种情况下可能会有意想不到的效果。

为了避免冲突， data-* 这个 attributes 出现了。

所有以“data-”开头的 attributes 都保留给程序员使用。它们在dataset 这个 property中可用。

例如，如果一个 elem 有一个名为 "data-about" 的属性，它可以作为 element.dataset.about 使用。

像这样:

<body data-about="Elephants">
<script>alert(document.body.dataset.about); // Elephants
</script>

像 data-order-state 这样的多字 ``attributes会变成驼峰式的:dataset.orderState`。

下面是一个重写的 “order state” 示例:

<style>.order[data-order-state="new"] {color: green;}.order[data-order-state="pending"] {color: blue;}.order[data-order-state="canceled"] {color: red;}
</style><div id="order" class="order" data-order-state="new">A new order.
</div><script>// readalert(order.dataset.orderState); // new// modifyorder.dataset.orderState = "pending"; // (*)
</script>

使用 data-* attribute 是传递自定义数据的有效、安全的方式。

请注意，我们不仅可以读取数据 attribute，还可以修改 data-attributes 。然后CSS相应地更新视图: 在上面的例子中，最后一行 (*) 将颜色更改为蓝色。

总结

Attributes – 是HTML所写的内容。
Properties – 是DOM对象中的内容。

一个小的比较:

	Properties	Attributes
Type	任何值、标准 properties 都具有规范中描述的类型	字符串
Name	名称是区分大小写的	名称不区分大小写

处理属性的方法有:

elem.hasAttribute(name) – 检查存在。
elem.getAttribute(name) – 得到值。
elem.setAttribute(name, value) –设置值.
elem.removeAttribute(name) – 移除属性.
elem.attributes 所有 attributes 的集合.

对于大多数情况，最好使用DOM properties 。只有当DOM properties 不适合我们时，我们才应该引用 attributes ，例如:

我们需要一个非标准 attribute。但如果它以 data- 开始，那么我们应该使用 dataset。
我们希望读取的值就是HTML中的“写入”内容。DOM property 的值可能不同，例如 href property 总是一个完整的URL，我们可能想要获得“原始”值。