访问html表单JavaScript中文本输入字段值的最简单方法？

Posted 2023-03-05

【中文标题】访问html表单JavaScript中文本输入字段值的最简单方法？

【英文标题】：Simplest way to access the value of text input field in html form JavaScript?

【发布时间】：2020-07-08 23:35:27

【问题描述】：

我想通过 javascript 尽可能简单地访问输入字段值。

<form name="F">
  <input name="searchTxt" type="text" id="searchTxt">
</form>

我可以使用以下方法访问该值（在 Firefox 调试器上测试）：

document.F.searchTxt.value

但我发现此方法是 Internet Explorer 的一种方言（并且适用于大多数浏览器以实现兼容性），并且在 W3C DOM 上已过时。 （参考：Using the W3C DOM - Archive of obsolete content | MDN）

我发现的另一种方法是使用 forms 和 elements 属性及其子名称：

document.forms.F.elements.searchTxt.value

我喜欢这种方法，我觉得它很简单，因为它不需要任何括号或引号，而只需要语句中的点。 （参考：Obtaining References to Forms and Form Elements in JavaScript - Dynamic Web Coding）

我认为这种方法的秘密在于form 有它的name（而不是id），所以可以通过它的简单名称来访问它。

请告诉我更简单、更稳定或访问字段值的最佳方法。

【问题讨论】：

没有最好的方法，这完全取决于您的用例和您使用的库。例如，使用 jquery，它是一个单行 - $("form").serializeArray()，您可以在单个数组中获取所有字段和值

谢谢，是的，最好的取决于用例。我正在研究最容易理解的东西。

【参考方案1】：

您可以使用document.querySelector 访问表单的 DOM 元素，它具有您需要的所有属性：

const form = document.querySelector('form');
console.log(form.elements.searchTxt.value);

【讨论】：

谢谢，document.querySelector() 返回第一个表单（或匹配元素）。

如果页面上有多个表单并希望使用此方法访问它们，您可以为每个表单添加id 或class，并分别使用document.querySelector('#form-id') 或document.querySelector('.form-class')。

【参考方案2】：

let searchTxt= document.forms["F"]["searchTxt"].value;

【讨论】：

这个答案对解决 OP 的问题有什么作用？

@dhamkith，谢谢。你知道document.forms["F"]["searchTxt"] 和document.forms["F"].elements["searchTxt"] 哪个更安全或相同吗？