在前端开发中，我们通常需要访问表单元素（如输入框、下拉列表等）以获取其值或进行操作。而要访问表单元素，一种常见的方法是使用 HTML 元素的 ID 或 name 属性。
为什么要使用 ID 或 name 属性？
ID 和 name 属性都可以用于唯一标识一个 HTML 元素。但它们的应用场景略有不同：
- ID 属性主要用于标识文档中的某个元素，通常用于 CSS 样式和 JavaScript 脚本中。每个页面上的 ID 值必须唯一。
- name 属性则用于表单元素，用于将表单元素的值提交到服务器时标识该元素。相同名称的多个表单元素将被视为数组。
因此，如果我们要访问表单元素，使用 ID 或 name 属性都是可行的选择。具体选择哪个属性取决于你的需求。
如何访问表单元素？
使用 ID 属性
使用 ID 属性访问表单元素非常简单。只需在 JavaScript 中使用 document.getElementById() 方法，并传入元素的 ID 值即可。例如：
------ ----------- -------------- ------- -------------------------------------------------------------------------
这里我们创建了一个输入框和一个按钮，当按钮被点击时，弹出对话框显示输入框中的值。
使用 name 属性
使用 name 属性访问表单元素稍微麻烦一些。因为相同名称的多个表单元素将被视为数组，所以我们需要使用 document.forms 集合来获取表单元素。例如：
----- -------------- ------ ----------- ---------------- ------- -------------------------------------------------------------------------- -------
这里我们创建了一个带有名称为 myForm 的表单，并在其中添加了一个输入框和一个按钮。当按钮被点击时，弹出对话框显示输入框中的值。
最佳实践
在选择 ID 或 name 属性来访问表单元素时，我们应该根据具体的需求进行选择。
- 如果你只需要访问页面上的某个元素，或者需要在 JavaScript 中操作该元素，那么使用 ID 属性是更好的选择。
- 如果你需要提交表单数据到服务器，并且有多个表单元素具有相同的名称，那么使用 name 属性是必须的。
无论你选择哪种属性，都要确保 ID 和 name 值唯一。如果存在多个相同的 ID 或 name 值，将会导致代码错误或无法正常工作。
示例代码
下面是一个完整的示例代码，演示如何使用 ID 或 name 属性访问表单元素：
--------- -----
------
------
----- ----------------
-----------------------
-------
------
----- --------------
---------- ----------- ------------- --------------------
--------- --------------- ------------- --------------------
------- -----------------------------------------------------------------------------
------- -------------------------------------------------------------------------------
-------
-------
-------在这个示例中，我们创建了一个包含两个输入框和两个按钮的表单。第一个按钮使用 ID 属性获取用户名，第二个按钮使用 name 属性获取密码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10960