Javascript HTML表单元素属性和属性冲突时的优先级

我注意到浏览器和不同类型的表单元素之间的行为存在差异，当表单元素DOM属性设置与来自同一元素属性的当前状态冲突时

看

在IE 9中：文本输入和复选框的属性均获胜（显示“属性值”并取消选中）

在Chrome中：属性胜于文本输入的属性（“显示属性值”），但复选框已选中

为什么文本输入和复选框之间有区别，为什么只有Chrome才有区别

---

那么优先顺序应该是什么呢？如果您更改了DOM属性，是否应该覆盖当前的表单输入状态？

浏览器有所不同，部分原因是相关的DOM功能没有准确、一致的定义。在HTML5中，这一点正在标准化：定义为

checked

属性（“IDL属性”，他们称之为）描述实际的检查状态（受用户操作和JavaScript代码的影响），而

defaultChecked

属性对应于HTML属性

checked

，设置初始检查

在问题中的示例代码中，

checked

属性设置为值

false

，该值不会改变任何内容（在没有

checked

属性的情况下，它是初始值）。然后设置

checked

属性，从而设置

defaultChecked

属性，但这不会更改检查状态

因此，Chrome不适用于HTML5草案。这在形式上只是一个特性，因为到目前为止还没有经过批准的规范，但实际上，它可以被描述为一个bug

---

对于文本输入框，

input type=text

，没有这样的问题，因为

value

属性更直接地反映了

value

属性（没有单独的

defaultValue

属性）。

浏览器不同，部分原因是没有精确的，所涉及的DOM功能的基于共识的定义。在HTML5中，这一点正在标准化：定义为

checked

属性（“IDL属性”，他们称之为）描述实际的检查状态（受用户操作和JavaScript代码的影响），而

defaultChecked

属性对应于HTML属性

checked

，设置初始检查

在问题中的示例代码中，

checked

属性设置为值

false

，该值不会改变任何内容（在没有

checked

属性的情况下，它是初始值）。然后设置

checked

属性，从而设置

defaultChecked

属性，但这不会更改检查状态

因此，Chrome不适用于HTML5草案。这在形式上只是一个特性，因为到目前为止还没有经过批准的规范，但实际上，它可以被描述为一个bug

对于文本输入框，

input type=text

，没有这样的问题，因为

value

属性更直接地反映了

value

属性（没有单独的

defaultValue

属性）。

请查看

setTimeout（函数（）{
document.forms['foo'].bar.setAttribute（“选中”、“为真”）；
}, 5000);
setTimeout（函数（）{
document.forms['foo'].baz.setAttribute（“value”、“attr value”）；
}, 5000);

如果您运行页面，但未触摸输入框，则5秒后，复选框将被勾选并设置值。但是，如果您运行该页面并立即单击复选框并在文本输入中键入一些文本，则在5秒钟后将不会修改这些值

这里要理解的概念是脏检查标志和脏值标志

它们所做的是标记复选框和文本输入字段，以确定是否

document.forms['foo'].bar.setAttribute（“checked”，“true”）

和

document.forms['foo'].baz.setAttribute（“value”，“attr value”）是否影响相应输入的检查性和值

对于脏检查标志

每个输入元素都有一个checkedness，它由checked IDL属性公开

每个输入元素都有一个布尔脏检查标志。如果为真，则称该元素具有脏检查性。在创建元素时，脏校验标志必须首先设置为false，并且每当用户以更改校验的方式与控件交互时，必须将脏校验标志设置为true

checked content属性是一个布尔属性，它提供了输入元素的默认检查性。添加checked content属性时，如果控件没有脏校验，则用户代理必须将元素的校验设置为true；删除选中的内容属性时，如果控件没有脏检查，则用户代理必须将元素的检查设置为false

因此，在上面的JSFIDLE中，用户单击复选框会停止
setAttribute
调用，从而影响复选框是否被选中

但它也说,

checked IDL属性允许脚本操纵输入元素的检查性。获取时，它必须返回元素的当前检查状态；设置时，必须将元素的检查设置为新值，并将元素的脏检查标志设置为true

所以
document.forms['foo'].bar.checked=false
还应该具有停止设置checked状态的
setAttribute
调用的效果，因为它也应该使dirty checkeness标志为true

但是在支票上
document.forms['foo'].bar.checked=false;
document.forms['foo'].bar.setAttribute("checked", "true");

document.forms['foo'].baz.value = 'prop value';
document.forms['foo'].baz.setAttribute("value", "attr value");

<form name="foo">
    <input name="bar" type="checkbox" />
    <input name="baz" type="text"/>
</form>

<script>
setTimeout(function() {
    document.forms['foo'].bar.setAttribute("checked", "true");
}, 5000);

setTimeout(function() {
    document.forms['foo'].baz.setAttribute("value", "attr value");
}, 5000);
</script>