Question

给出一个表格：

console.log(document.getElementById('f').elements['a']);
console.log(document.getElementById('f').elements['b']);

<form id='f'>
  <input name='b' list='list' type='text'/>
  <datalist name='a' id='list' />
  <input name='btn' type='button' value='go'/>
</form>

为什么我尝试按名称datalist a返回undefined？但是，当我按名称b搜索时，它会成功吗？

Answer 1

根据elements属性https://www.w3.org/TR/html5/infrastructure.html#htmlformcontrolscollection-0中的are元素：

button, fieldset, input, keygen, object, output, select, textarea

因此，如果您希望<datalist>被视为element - 您可以参考W3C）

Answer 2

您可以使用.children。元素的控件为<input>元素，其属性为list="list"，在<form>提交时，键值对将为名称b，值为<option>子元素<datalist>元素的元素，选择<option>提交<form>并查看Network标签以获取结果查询字符串参数

b:123
btn:go

或

b:456
btn:go

注意<datalist>元素不是自动关闭，有效HTML需要关闭</datalist>标记。

onload = () => {
  console.log(document.getElementById('f').children["a"]);
  console.log(document.getElementById('f').elements['b']);
}

<form id='f'>
  <input name='b' list='list' type='text' />
  <datalist name='a' id='list'>
    <option value="123">123</option>
    <option value="456">456</option>
  </datalist>
  <input name='btn' type='submit' value='go' />
</form>

Answer 3

yaourt -S lib32-libgtkhtml属性仅包含表单控件。由于datalist不是表单控件，因此不包括在内。有关详细信息，请参阅MDN docs on HTMLFormElement和associated collection。

在表格中按姓名查找“datalist”？

3 个答案: