本文详解为何监听表单 submit 事件时 `form.value` 返回 undefined，并指出正确做法是通过独立获取 input 元素来读取用户输入，附带可运行代码示例与关键注意事项。
在 JavaScript 中，<form> 元素本身没有 .value 属性——它只是一个容器，不直接存储用户输入值。你当前代码中：
const inputEl = document.querySelector('form'); // ❌ 变量名误导：实际选中的是 form 元素
const input = inputEl.value; // ❌ form 没有 value，始终为 undefined这正是导致 console.log(input) 输出 undefined 的根本原因。
✅ 正确做法是：分别选取 <form> 和 <input> 元素，并在 submit 回调中从 input 元素读取 .value：
Chinese Sensitive Words
下载
中文敏感词/违禁词检测与内容合规性检查工具。支持对小红书（Xiaohongshu）、Douyin（抖音）、WeChat（微信）、Weibo（微博）、Bilibili（哔哩哔哩）、Zhihu（知乎）、Taobao（淘宝）、JD.com（京东）等主流平台的禁用词、限用词及高风险词进行文本扫描与合规性分析。
const formEl = document.querySelector('form');
const inputEl = document.querySelector('input[type="text"]'); // 更精确的选择器
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';
formEl.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止页面刷新
const searchTerm = inputEl.value.trim(); // ✅ 获取真实输入值，并去除首尾空格
if (!searchTerm) {
console.warn('请输入有效单词');
return;
}
console.log('搜索词:', searchTerm);
fetch(`${url}${encodeURIComponent(searchTerm)}`)
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => {
console.log('API 响应:', data);
// ✅ 此处可添加渲染逻辑（如更新 .meaning 元素）
})
.catch(err => {
console.error('请求失败:', err);
// ✅ 可显示错误提示给用户，例如：document.querySelector('.meaning').textContent = '未找到该单词';
});
});? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- 使用 encodeURIComponent() 对输入进行编码，避免空格、特殊字符（如 hello world → hello%20world）导致 API 请求失败；
- 始终检查 input.value.trim() 是否为空，防止发送空请求；
- 推荐为 input 添加 id="search-input" 并用 document.getElementById('search-input') 获取，语义更清晰、性能略优；
- 若表单含多个 input，务必明确指定目标元素（如 form.querySelector('input[name="word"]')），避免歧义。
掌握这一基础概念，不仅能解决字典 API 项目的问题，更是理解 DOM 元素职责分离的关键一步：表单负责提交行为，输入控件负责承载数据。
