“HTML 属性”与“DOM 元素的属性”[重复]答案

【问题标题】："HTML attribute" versus "property of the DOM element" [duplicate]“HTML 属性”与“DOM 元素的属性”[重复]
【发布时间】：2017-01-12 08:14:22
【问题描述】：

我对“HTML 属性”和“DOM 元素的属性”之间的区别感到困惑。从this post 得知getAttribute("class") 返回前者，而element.className 返回后者。但是，我无法理解以下代码的输出：

var span = document.querySelector("#span");
console.log(span.className + ' ' + span.getAttribute("class"));
span.className = "bar";
console.log(span.className + ' ' + span.getAttribute("class"));

&lt;span id="span" class="foo"&gt;&lt;span&gt;

我希望结果是

foo foo
bar foo

因为据我了解，我的 HTML 文件的内容在运行 javascript 时没有更改。此外，当我将span.className = "bar"; 行替换为span.setAttribute('class', 'bar'); 时，仍然会得到相同的结果。

我的问题是：“HTML 属性”和“DOM 元素的属性”有什么区别和关系？

【问题讨论】：

HTML 属性是您在标记中编写的内容。属性就像其他所有内容一样成为 DOM 的一部分。其中一些属性在创建时直接映射到 DOM 元素上的属性。其中，它们中的一个子集维护属性和属性之间的实时映射，因此当一个更改时两者都会更新。 class 属性就是其中之一。
@squint 我认为这是一个不错的答案。
我会让你或其他人更深入地挖掘这一切的复杂性并发布答案。我在这里的工作已经完成......
就在 className 位上，这个特定的名称是由于 JavaScript 语言的一个怪癖。当时，JavaScript 关键字不能用于属性名称，因此element.class 将是一个错误。 class 是一个保留字，即使它当时没有被使用。具有讽刺意味的是，当class 成为语言的一部分时，限制已被取消，并且可以安全地使用关键字作为属性名称。所以在这种情况下，class 永远不会成为问题。

标签： javascript html dom

【解决方案1】：

为了进一步混淆问题，HTML5 规范将它们分别称为内容属性和 IDL 属性。

它们有时以相同的名称关联，有时则不同。

在最常见的关联类型中，这两种类型的属性被称为“反映”彼此，因此当一种属性发生变化时，另一种也会发生变化。 HTML5 在Reflecting content attributes in IDL attributes 中对此进行了描述。第一段说：

定义了一些 IDL 属性以反映特定内容属性。这意味着在获取时，IDL 属性返回内容属性的当前值，以及设置时的 IDL 属性将内容属性的值更改为给定的价值。

有时，相互反映的 IDL 属性和内容属性具有不同的名称。例如，输入的“值”内容属性由defaultValueIDL 属性反映。

有时两者之间的关联更复杂；对一个的更改可能会影响另一个，但不是直接的一对一映射。

【讨论】：

【解决方案2】：

在大多数情况下，对属性的修改也会在属性中表示，反之亦然。就像在您的示例代码中一样。

但是，表单元素中的某些属性/属性是不同的。最初，属性值是从相关属性中检索的，但随后它们不再相互影响。

请注意每次修改前后的标记：

var el = document.querySelector('input')
console.log(el.value + ' ' + el.getAttribute('value'))
console.log(el.outerHTML)
el.value = 'prop'
console.log(el.value + ' ' + el.getAttribute('value'))
console.log(el.outerHTML)
el.setAttribute('value', 'attr')
console.log(el.value + ' ' + el.getAttribute('value'))
console.log(el.outerHTML)

&lt;input type="text" value="123"&gt;

【讨论】：