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

Question

<input name='x' id='y' list='z'>在 JavaScript 中，你可以这样做var input = document.createElement('INPUT');input.id = 'x'; //this worksinput.name = 'y'; //this also worksinput.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'));