为何HTMLInputElement的list属性仅含getter无setter？动态绑定遇阻

问题核心在于：DOM对象的HTMLInputElement.list是只读属性，它的作用是获取关联的<datalist>元素，而非设置关联。直接赋值字符串ID会触发报错，正确的做法是通过setAttribute方法设置元素的list属性。

正确实现代码（TypeScript） #

// 创建Datalist并添加刻度选项
const dataList = document.createElement('datalist');
dataList.id = 'range-ticks';

// 添加刻度标签
const ticks = [0, 25, 50, 75, 100];
ticks.forEach(value => {
  const option = document.createElement('option');
  option.value = value.toString();
  option.label = `${value}%`;
  dataList.appendChild(option);
});
document.body.appendChild(dataList);

// 创建Range滑块并关联Datalist
const rangeSlider = document.createElement('input');
rangeSlider.type = 'range';
rangeSlider.min = '0';
rangeSlider.max = '100';
// 用setAttribute设置关联，而非直接赋值rangeSlider.list
rangeSlider.setAttribute('list', 'range-ticks');

document.body.appendChild(rangeSlider);

为什么HTML中可以直接写list属性？ #

在HTML静态代码里，list="range-ticks"是元素的HTML属性，浏览器解析时会自动通过这个属性值找到对应ID的datalist并建立关联。但在JS/TS动态操作DOM时，DOM对象的list属性是只读的getter，只能用来获取已关联的datalist，不能直接赋值ID字符串，必须通过setAttribute操作HTML属性来完成关联。

内容的提问来源于stack exchange，提问作者goddtriffin