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

EN

看看http://jsfiddle.net/Ldf2s/9/。

<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>

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

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

这些操作是标记复选框和文本输入字段，以确定document.forms['foo'].bar.setAttribute("checked", "true");和document.forms['foo'].baz.setAttribute("value", "attr value");是否影响相应输入的检查性和值。

对于脏签入标志，HTML5规范说

每个输入元素都有一个校验，这是由选中的IDL属性公开的。 每个输入元素都有一个布尔脏检查标志。当它是真的时，这个元素被称为有一个脏的检查。创建元素时，必须首先将脏签入标志设置为false，并且当用户以更改签入的方式与控件交互时，必须将其设置为true。 选中的内容属性是一个布尔属性，它提供输入元素的默认检查性。添加选中的内容属性时，如果控件没有脏签入性，则用户代理必须将元素的签入设置为true；当删除选中的内容属性时，如果控件没有脏签入性，则用户代理必须将元素的签入设置为false。

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

但是，它也说

选中的IDL属性允许脚本操作输入元素的检查。在获取时，它必须返回元素的当前校验；在设置时，它必须将元素的校验设置为新值，将元素的脏检查标志设置为真。

因此，document.forms['foo'].bar.checked=false;还应该具有阻止setAttribute调用设置选中状态的效果，因为它也应该使脏签入标志成为真。

但在Chrome中，选中的值是更改的，因此它与HTML5规范不一致。

HTML5规范对文本输入值也有类似的要求，因为有一个脏值标志，在用户更改值时设置为true，或者通过编程设置value属性。

在这种情况下，Chrome的行为似乎是正确的，可能是因为在以编程方式设置值属性时设置脏值标志的要求是在描述脏值标志时显式地提出的，而对脏签入标志的等效描述没有相应的注释。这一要求仅在上述报价中单独提出。

浏览器各不相同，部分原因是对于所涉及的DOM特性没有精确的、基于共识的定义。在HTML5中，这是标准化的：元素被定义为checked属性(他们称之为“IDL属性”)描述实际的检查状态(受用户操作和JavaScript代码的影响)，而defaultChecked属性对应于HTML checked，后者设置初始签入。

在问题中的示例代码中，checked属性被设置为false值，它不会更改任何内容(在没有checked属性的情况下，它是初始值)。然后设置checked属性，从而设置defaultChecked属性，但这不会改变签入状态。

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

对于文本输入框input type=text，没有这样的问题，因为value属性更直接地反映了value属性(没有单独的defaultValue属性)。