为什么 HTMLInputElement 的 list 字段只有 getter，没有 setter？

Question

我正在 Typescript 中创建一个 HTMLInputElement，我打算通过将输入元素的type字段设置为 来将其用作“滑块” "range"。

根据 MDN Web Docs，我可以通过创建 HTMLDatalistElement 的实例、为数据列表提供并通过滑块的字段id引用数据列表来使该滑块更加精美。这不仅会给我的滑块一些刻度线来表示滑块光标当前所在的位置，而且我还可以设置数据列表的 HTMLOptionElement字段来引入带标签的刻度线。idlistlabel

来源：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#adding_labels

然而，Deno/TS-Node 抱怨这个错误：

error: TS2540 [ERROR]: Cannot assign to 'list' because it is a read-only property.
      inputElement.list = datalistId;

谷歌浏览器抱怨这个错误：

Uncaught TypeError: Cannot set property list of #<HTMLInputElement> which has only a getter

由于 MDN Web 文档清楚地表明该字段是要使用的，因此我尝试通过以下方式忽略 Deno/TS-Node 错误来消除它：

// @ts-ignore

该解决方案不起作用，并导致上述 Google Chrome 运行时错误。

我不明白为什么在通过文件构造 HTMLInputElement 时允许设置此字段.html，但在通过 Javascript/Typescript 动态创建 HTMLInputElement 实例时不允许使用它。能够动态设置滑块的刻度线标签会非常好。

Answer 1

根据HTML 规范，list content属性确实被指定为包含相应元素的 ID datalist：

该list属性用于标识列出向用户建议的预定义选项的元素。如果存在，其值必须是同一树中元素
的 ID 。datalist

但是，input元素的list IDL属性（如 DOM 接口中所指定）是只读的，并返回实际 IDHTMLDataListElement而不是其 ID：

interface HTMLInputElement : HTMLElement {
  // ...
  readonly attribute HTMLDataListElement? list;
  // ...
}

但是，您可以使用该函数操作list 内容setAttribute()属性，并以这种方式设置元素datalist的 ID input：

interface HTMLInputElement : HTMLElement {
  // ...
  readonly attribute HTMLDataListElement? list;
  // ...
}

document.querySelector('#input').setAttribute('list', 'values');