通过JavaScript操作DOM实现表单自动填充，首先利用getElementById、getElementsByName或querySelector定位输入元素，然后设置其value属性赋值，并触发input、change等事件以激活前端逻辑。对于React、Vue等框架页面，需手动触发事件确保绑定生效。脚本可在浏览器控制台直接运行，也可保存为书签便于重复使用。但需注意跨域限制、反爬机制、敏感信息保护及SPA加载时机等问题，合理应用可高效完成表单填充任务。
在网页开发或自动化测试中，表单自动填充是一个非常实用的功能。通过 JavaScript 脚本，我们可以快速为表单字段赋值，提升效率。实现这一功能的核心是操作 DOM 元素，找到对应的输入框并设置其 value 值。
理解表单结构与元素选择
要实现自动填充，首先要了解目标表单的 HTML 结构。常见的表单元素包括 input、select 和 textarea。每个元素通常有 name、id 或 class 属性，可用于定位。
使用以下方法可以选中表单元素：
- document.getElementById('id名')：通过 ID 精准选择
- document.getElementsByName('name名')：返回同 name 的元素集合
- document.querySelector('CSS选择器')：灵活匹配任意选择器
编写自动填充脚本
下面是一个简单的 JS 脚本示例，用于填充登录表单：
// 设置用户名和密码
document.getElementById('username').value = 'your_username';
document.getElementById('password').value = 'your_password';
// 如果有下拉框，例如选择用户类型
var selectElement = document.getElementById('user-type');
if (selectElement) {
selectElement.value = 'member'; // 根据 option 的 value 设置
}
// 触发 input 事件，确保前端验证或监听生效
['input', 'change'].forEach(event => {
document.getElementById('username').dispatchEvent(new Event(event));
document.getElementById('password').dispatchEvent(new Event(event));
});
注意：某些网页使用框架（如 React、Vue），可能对 value 赋值不敏感，需手动触发事件以激活绑定逻辑。
在浏览器中运行脚本
你可以将上述代码直接在浏览器控制台执行：
- 打开目标网页
- 按 F12 打开开发者工具
- 切换到 Console 面板
- 粘贴脚本并回车运行
也可以将其保存为书签，创建“书签脚本”以便重复使用：
javascript:(function(){ document.getElementById('username').value = 'auto_fill'; document.getElementById('password').value = '123456'; })();把这段代码添加为书签，点击即可自动填充当前页面的表单。
注意事项与限制
自动填充虽方便，但需注意以下几点：
- 跨域页面无法直接注入脚本（如 iframe 外控制）
- 部分网站启用反爬或输入检测，简单赋值可能无效
- 涉及密码等敏感信息时，避免明文写在脚本中
- SPA（单页应用）可能需要等待组件加载完成再执行脚本
