本文介绍在 JavaScript 中通过事件监听器捕获表单提交，精准提取标题、作者、页数三个输入字段的值，并统一存入数组 book，适用于图书管理类交互应用。
本文介绍在 javascript 中通过事件监听器捕获表单提交，精准提取标题、作者、页数三个输入字段的值，并统一存入数组 `book`，适用于图书管理类交互应用。
在构建图书馆应用（如 Odin Project 项目）时，常需将用户填写的图书信息（标题、作者、页数）快速收集并结构化存储。最直接高效的方式是利用表单元素的语义化结构和 DOM 查询能力，避免手动逐层遍历（如 firstChild.firstChild），既提升可读性，也增强健壮性。
推荐做法是为提交按钮（或表单本身）绑定事件监听器，并使用 querySelectorAll 精准选取目标输入控件：
const submitButton = document.getElementById('create-book');
submitButton.addEventListener('click', (event) => {
event.preventDefault();
const book = [];
// 按顺序选取 form 内所有 input 元素（title → author → pages）
document.querySelectorAll('#new-book-form input').forEach(input => {
book.push(input.value.trim()); // .trim() 防止空格干扰
});
console.log(book); // 示例输出: ['Ender's Game', 'Orson Scott Card', '324']
});
✅ 关键说明：
-
#new-book-form input确保只匹配该表单下的<input>元素，且按 HTML 中声明顺序返回（即 title、author、pages），天然保持数据逻辑顺序； - 使用
.trim()可有效过滤用户误输的首尾空格，提升数据质量； - 若需更明确的字段映射（如后续扩展 ISBN 或是否已读），建议改用对象形式：
const book = { title: document.getElementById('title').value.trim(), author: document.getElementById('author').value.trim(), pages: parseInt(document.getElementById('pages').value) || 0 };
⚠️ 注意事项：
- 不要将
addEventListener赋值给const book = ...—— 这会把事件监听器函数赋给book，而非书籍数据；变量应在回调内部定义； - 若表单含非输入控件（如
<button></button>、<label></label>），querySelectorAll('input')可确保安全过滤； - 生产环境建议添加基础校验（如标题非空、页数为正整数），再推入数组或创建实例。
此方法简洁、可维护性强，完美适配图书增删等 CRUD 场景，是前端表单数据采集的标准实践之一。
