与 HTML/JavaScript 中的元素属性保持一致

Question

<input name='x' id='y' list='z'>

在 JavaScript 中，你可以这样做

var input = document.createElement('INPUT');

input.id = 'x'; //this works

input.name = 'y'; //this also works

input.list = 'z'; //this does not work

我的问题很简单：这里发生了什么魔法？为什么 .id 和 .name 有效，但 .list 无效（需要使用 setAttribute 设置） ？

有没有办法知道（除了知道一切）在输入元素上设置列表属性的方法正在使用setAttribute("list", "z");？setAttribute 调用的魔力是什么，而 input.list 不是？

Answer 1

这不起作用，因为listan 的属性HTMLInputElement被定义为只读interface HTMLInputElement : HTMLElement {   [HTMLConstructor] constructor();   ...   readonly attribute HTMLElement? list;      ...    }

Answer 2

这里的问题是像id和这样的属性name可以追溯到文档对象模型 (DOM)的更旧版本——可以追溯到1990 年代中期的DOM 级别 0（或“旧版 DOM” ）。这些 DOM 属性与 HTML 标记中的同名属性完全对应。相比之下，将元素list的预定义内容附加<datalist>到<input>元素的属性要晚得多。它在 2018-19 年左右开始出现在大多数浏览器中。（即使是现在，CanIUse 也表明它在 Firefox 中还没有准备好......尽管我自己在Firefox 83中的实验表明它已经准备好了。）因此，最可靠的方法是使用：const myInput = document.createElement('input');myInput.setAttribute('id', 'x');myInput.setAttribute('name', 'y');myInput.setAttribute('list', 'z');console.log(myInput.getAttribute('id'));console.log(myInput.getAttribute('name'));console.log(myInput.getAttribute('list'));