为什么element.setAttribute（'checked'，true）不起作用？

Question

我想做这样的事情：

elementX.setAttribute('checked', true); // this is input type checkbox
elementY.appendChild(elementX);

渲染等一切都可以，但是在页面上，不检查输入。 当我在chrome控制台中查看元素时，可以看到：

<input type="checkbox" checked="true">

我该怎么办？

我已经尝试过了

elementX.setAttribute('checked', true);
elementX.setAttribute('checked', 'true');
elementX.setAttribute('checked', 'checked');

我在控制台中没有任何错误。

Answer 1

参见MDN ：

已检查

布尔值属性，指示默认情况下（页面加载时）是否选中此复选框。 这并不表示该复选框是否正在检查：如果该复选框的状态改变时，该内容属性不反映更改。 （仅更新HTMLInputElement的选中的IDL属性。）。

虽然设置了checked属性将显示元素的序列化更改，但实际上不会选中该复选框。 为此，您必须调用设置器，例如

elementX.checked = true;

Answer 2

首先，@ CertainPerformance答案是我支持的答案，它是正确的！

我只是想更深入地了解IDL（接口设计语言）属性与内容属性之间的细微差别，以及它们是否具有反射性 。

在这种情况下，IDL属性是元素的DOM表示形式上的JavaScript属性。 不仅是任何属性，而且是W3规范中预定义的属性。 IDL示例

HTML中指定的属性被视为内容属性 。 这些属性用于在渲染过程中在DOM节点上填充IDL属性 。 可以通过几种方法（包括getAttribute方法）从DOM节点访问内容属性 ，但它们不会像IDL属性那样存储在其上。 用简单的术语来说， element.getAttribute("checked")和element.checked实际上是在两个完全不同的对象中寻找checked的键。

那么， 反思是什么意思？

如果未更改节点，但如果更改了特定属性，则从渲染的角度来看，DOM节点的property及其HTML attribute是可以互换的。

以任何方式更改id和class ，无论是直接在DOM节点上还是使用element.setAttribute方法在Attribute对象内，都将更改两个值。

id和class是反射性 IDL属性，因为实际上它们会监视其内容属性的更改，反之亦然。

另外， checked IDL属性和value 也不具有反射性 。 当在DOM节点或Attribute Object上更改value或checked的属性时，它不会更改另一个的相应属性。

在这些属性之外 （除了id和class 之外，还有更多-尽管没有反射与不反射的真实列表 -我想这是与DOM中Node的身份有关的任何属性都会导致重新渲染） 内容属性和DOM节点属性未绑定在一起。 如果打算更新或获取当前数据 ，这将使getAttribute和setAttribute无效，因为当前数据仅在DOM Node属性中找到 。

以下示例说明了不同之处：

---

ID更改示例：属性和属性相互反映

 let i = document.querySelector("input"); i.addEventListener("id_change", function() { let HTML_Attribute = i.getAttribute("id"), DOM_Node_Property = i.id; console.log("HTML Attribute 'value': " + HTML_Attribute + "\\n DOM Node Property 'value': " + DOM_Node_Property); }) let n = 1; let timer = setInterval(function() { if(n > 2) clearInterval(timer); i.setAttribute("id", "newId_" + String.fromCharCode(Math.floor(Math.random() * 26) + 65)); i.dispatchEvent(new CustomEvent("id_change")); n++; }, 1000); 

 <input value="Hello World"/> 

---

值更改示例：属性和属性不同

 let i = document.querySelector("input"); i.addEventListener("input", function() { let HTML_Attribute = i.getAttribute("value"), DOM_Node_Property = i.value; console.log("HTML Attribute 'value': " + HTML_Attribute + "\\n DOM Node Property 'value': " + DOM_Node_Property); }) 

 <input value="Hello World"/> <em><small>Type into the Box</small></em>