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

Question

我对一些DOM元素property与其相应的attributes工作之间的关系背后的原因感到困惑.

下面是从书的曲线图jquery in action 2015 Bear Bibeault,示出的关系property和attributeDOM元素.

为了进一步解释这个概念,作者对代码有以下代码和解释.

我的问题是,为什么有些property和attribute同步,为什么有些没有同步,为什么有些attributes没有相应的property？

我发现了一个伟大的职位解释之间的关系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赢得了这场战争,但它的DHTML变体是在人们将HTML属性名称视为固定集合时设计的.对于任意属性,它有太多问题.例如:

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

除了Internet Explorer之外,没有任何浏览器实现过属性到属性的这种1:1映射,甚至Internet Explorer在向后兼容性方面尽快放弃了它(这需要很长时间).相反,属性和属性现在被视为单独的命名空间.浏览器将为您提供一些属性作为属性访问和操作的快捷方式,但它们实际上只是为了您的方便.并且存在一些混淆水域的向后兼容性案例:value属性和value属性实际上并未映射到彼此,前者反映元素的当前状态,而后者反映其初始状态.

编辑:仅供参考,您引用以下声明:

如果属性作为内置属性存在但是它是布尔值,则该值不会同步.

这是错误的,这种行为与布尔与字符串无关.如上所述,该value属性同样缺少同步checked属性.另一方面,boolean hidden属性将与相应的属性正确同步.据我所知,你会发现Netscape引入的原始表单处理API的属性和属性之间缺少同步 - 这只是向后兼容性.

所以也许你不应该相信那些用DOM问题在jQuery上写书的人.毕竟,这些明确地选择退出直接触摸DOM并选择完全不同的表示与其自己的一组怪癖.

Answer 2

您会在 HTML 规范中找到答案。我首先希望您看一下input元素的属性和属性（标题“内容属性”和“DOM 接口”）以及有关属性反射的部分（第一段）。

您会注意到所有属性都有相应的属性，并且操作属性将更改它反映的属性。值得一提的是：

(1) 属性可以通过名称略有不同的属性来反映。经典的例子是属性class反映的className属性和属性for反映的属性htmlFor。

(2)同样checked，属性由defaultChecked属性反映，而checked属性表示复选框的内部状态，而与checked属性无关。这总是引起程序员（和书籍作者）的困惑。本答案末尾解释了差异。

(3) 虚构的属性（例如示例中的“book”属性）不会生成相应的属性，反之亦然。为此，HTML 规范描述了一种称为数据属性和dataset属性的机制。

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

依靠。例如，以下两者都会产生相同的结果和 HTML：

document.getElementById("div-1").title = "Hello";
document.getElementById("div-1").setAttribute("title") = "Hello";

但是，对于表单元素，您应该操作状态而不是属性。假设您有以下 HTML 标记：

<input type="checkbox" id="checkbox-1">

并且您执行以下任一操作：

document.getElementById("checkbox-1").defaultChecked = true;
document.getElementById("checkbox-1").setAttribute("checked", "checked");

这是结果：

<input type="checkbox" id="checkbox-1" checked="checked">

但是复选框是否真正被选中取决于控件的脏程度（即其状态是否在某个时刻发生了更改）。对于表单元素，您通常会操作与内部状态相对应的属性：

document.getElementById("checkbox-1").checked = true;