JavaScript 获取 HTML 表单元素并操作示例

获取表单对象

首先需要定位到包含输入框的 <form> 容器。通常使用 getElementById 方法，配合表单标签上设置的 id 属性来获取引用：

// 获取 form 对象，假设 HTML 中有 <form id="my_form">
var form = document.getElementById('my_form');

通过 Name 属性获取子元素

一旦获得了表单对象的引用，即可通过其内部的 elements 集合或直接以 name 属性作为键名来访问子元素。这种方式比再次遍历 DOM 更高效。

1. 获取用户名输入框：对应 HTML 中 <input name="user_name"> 的元素对象。
2. 获取密码输入框：对应 HTML 中 <input name="password"> 的元素对象。

第1步：初始化变量引用

目的：建立 JS 变量与 DOM 节点之间的连接，便于后续操作。

• 入口：浏览器控制台或外部 JS 脚本文件。
• 动作：定义变量指向表单内的具体 <input> 对象。

// 用户名 input 对象，user_name 是 input 的 name 属性
var userName = form.user_name;
// 用户密码 input 对象，password 是 input 的 name 属性
var password = form.password;

第2步：执行清空操作

目的：清除输入框内的默认值或用户已输入的内容。

• 动作：将输入框对象的 value 属性设置为空字符串 ''。
• 完成状态：页面对应的输入框视觉上变为空白。

// 用户名清空
userName.value = '';
// 用户密码清空
password.value = "";

注意事项与排错

在实际使用中，确保 HTML 结构正确加载是关键。如果脚本报错 Cannot read properties of undefined，通常是因为：
1. 脚本执行时 DOM 尚未完全加载（建议将脚本放在 body 底部或使用 DOMContentLoaded 事件）。
2. 指定的 id 或 name 属性拼写错误，导致无法匹配对应的 DOM 节点。

总结

以上就是通过 JavaScript 获取 Form 里的表单元素并进行操作的详细内容，更多关于前端 DOM 操作与表单交互的资料请关注本站其它相关文章！