关于javascript：“HTML属性”与“DOM元素的属性”

“HTML attribute” versus “property of the DOM element”

本问题已经有最佳答案，请猛点这里访问。

我对"html属性"和"dom元素的属性"之间的区别感到困惑。从这篇文章中，我了解到getAttribute("class")返回前者，而element.className返回后者。但是，我无法理解以下代码的输出：

1
2
3
4

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

1	<span id="span" class="foo"><span>

我希望结果是

1 2	foo foo bar foo

因为据我所知，在运行javascript时，HTML文件的内容没有被更改。此外，当我用span.setAttribute('class', 'bar');替换span.className ="bar";线时，结果还是一样的。

我的问题是："html属性"和"dom元素的属性"之间有什么区别和关系？

相关讨论

为了进一步混淆问题，HTML5 Spec refers to them as content attributes，and idl attributes respectively.

有时候，他们的名字是一样的，有时候不一样。

在最常见的组合类型中，两种属性被称为相互"反射"，因此当一种变化是另一种变化。HTML5在IDL属性中以反射含量属性的方式描述此。The first paragraph says：

Some IDL attributes are defined to reflect a particular content
attribute. This means that on getting, the IDL attribute returns the
current value of the content attribute, and on setting, the IDL
attribute changes the value of the content attribute to the given
value.

有时，IDL属性和内容属性反射了另一个不同的名称。例如，输入"值"内容属性被缺陷值IDL属性反射。

有时候，两人之间的联系更为复杂，一人可能影响另一人，而不是一个直接映射。

在大多数情况下，对属性的修改将代表同样的财产，反之亦然。就像你的样本密码一样

然而，形式元素中的某些属性/属性是不同的。最初从相关属性检索财产价值，但不影响任何其他属性。

请在每一次修改之前和之后注意标记：

1
2
3
4
5
6
7
8
9

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)

ZZU1