javascript - 元素属性与其对应属性之间关系背后的设计原因

Question

我对某些 DOM 元素的 property 与其对应的 attributes 之间的关系如何运作背后的原因感到困惑。

下面是 jquery in action 2015 Bear Bibeault 一书中的图表，显示了 DOM 元素的 property 和 attribute 之间的关系。

为了进一步说明概念，作者有如下代码以及对代码的解释。

我的问题是，为什么有的property和attribute同步，有的不同步，有的attributes没有对应属性？

我找到了 great post解释了property和attribute之间的关系，但没有涉及为什么要这样设计。我希望了解设计背后的原因。

一个相关的问题，如果我想在 DOM 元素上获取或设置一个值，我应该获取/设置 property 还是 attribute？

我们如何在需要时找到特定 property 与其对应的 attribute 之间的关系？是否有专门详细说明这种关系的文档？

Answer 1

DOM 是在很大程度上“自然”生长的东西。你必须考虑，HTML(意思是:属性)是第一位的，最初没有任何脚本。最终，Netscape 引入了 JavaScript，你今天会认为这是一个极其有限的 API。这个 API 适用于操作表单，而不是真正的任意 HTML 元素。然后 Netscape 和 Internet Explorer 推出了当时称为 DHTML(动态 HTML)的不同变体。 Netscape 的变体依赖于一个特殊的 <layer>标签，今天没有人记得它。 Internet Explorer 变体允许对 HTML 元素进行更通用的访问，尤其是具有属性到特性的 1:1 映射。

虽然 Internet Explorer 赢得了这场 war ，但它的 DHTML 变体是在人们将 HTML 属性名称视为固定集合时设计的。具有任意属性，它有太多问题。例如:

• class属性最初无法映射到 JavaScript，因为 class是保留关键字。虽然 JavaScript 标准的后续更改允许使用保留关键字作为属性名称，但 Internet Explorer 必须映射 class属性为 className属性(property)。设置className元素上的属性或 el["class"] JavaScript 对象上的属性导致了可笑的不一致。
• HTML 属性不区分大小写，而 JavaScript 属性区分大小写。所以 Internet Explorer 有各种各样的技巧来识别意图。当元素为 <FOO SOMEATTIRIBUTE> 时发生了什么你试图访问 el.someAttribute或 el.SOMEATTRIBUTE来自 JavaScript？我不记得了，但它并不漂亮。
• JavaScript 对象也总是有方法。属性 toString例如不能映射到属性，因为它会掩盖 toString()方法。

除了 Internet Explorer 之外，没有其他浏览器实现过这种属性到属性的 1:1 映射，甚至 Internet Explorer 在向后兼容方面可行时也放弃了它(这花了很长时间)。相反，属性和属性现在被视为单独的 namespace 。浏览器会为您提供一些属性作为属性访问和操作的快捷方式，但它们实际上只是为了您的方便。还有一些向后兼容的情况使水变得困惑:value属性(property)和value属性实际上并不相互映射，前者反射(reflect)元素的当前状态，而后者反射(reflect)其初始状态。

编辑:仅供引用，您引用以下声明:

If attribute exists as a built-in property but it's a Boolean, the value isn't synchronized.

这是错误的，该行为与 bool 值与字符串无关。如上所述，value属性与 checked 同样缺少同步属性(property)。另一方面， bool 值 hidden属性将与相应的属性正确同步。据我所知，您会发现 Netscape 引入的原始表单操作 API 的属性和特性之间缺少同步 - 这只是向后兼容性。

因此，也许您不应该相信那些用 DOM 问题撰写有关 jQuery 书籍的人。毕竟，这些明确地选择停止直接接触 DOM，并选择了一种完全不同的表示方式，它有自己的一套怪癖。