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属性是Element的DOM表示形式上的JavaScript属性。不仅是任何属性，而且是W3规范中预定义的属性。 IDL Examples

在HTML中指定的

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

那么反光是什么意思？

如果未更改DOM节点的property及其HTML attribute，并且更改了 specific 属性，则该节点从呈现的角度是可以互换的。

以任何方式更改id和class，无论是直接在DOM节点上还是使用element.setAttribute方法在Attribute对象中更改，都会导致两者值正在更改。

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

或者checked和value的IDL属性不具有反射性。在DOM节点或属性对象上更改value或checked属性时，它不会更改另一个属性。

除了这些属性（（id和class以外-尽管有no real list of reflective vs not reflective-我认为它是与...的身份有关的任何属性（将导致DOM中的节点重新渲染））内容属性和 DOM节点属性未绑定在一起。如果打算更新或获取当前数据，则使用getAttribute和setAttribute毫无用处，因为当前数据仅在< strong> DOM节点属性。

以下示例说明了区别：

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>

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

2 个答案:

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

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