本文讲解如何使用 JavaScript 的 querySelectorAll() 替代 querySelector()，批量获取表格每行中所有 .breakfast、.lunch、.dinner 元素的文本内容，并结构化为嵌套数组，彻底解决“仅返回首项”的常见误用问题。
本文讲解如何使用 javascript 的 `queryselectorall()` 替代 `queryselector()`，批量获取表格每行中所有 `.breakfast`、`.lunch`、`.dinner` 元素的文本内容，并结构化为嵌套数组，彻底解决“仅返回首项”的常见误用问题。
在前端数据采集场景中，当 HTML 表格某一行包含多个具有相同 class（如 .breakfast）的 <td> 元素时，若使用 <code>element.querySelector('.breakfast')，只会匹配该行第一个匹配元素，导致后续值被忽略——这正是你遇到 Cannot find proper value in mapped array 问题的根本原因。
正确的做法是：对每一行（<tr>）分别调用 <code>querySelectorAll() 获取所有目标元素集合，再通过 map() 提取全部 innerText 值。以下是优化后的完整解决方案：
| 1 | 2024-05-01 | 燕麦粥 | 宫保鸡丁 | 清蒸鱼 | 水煮蛋 | 番茄炒蛋 | 紫菜汤 |
| 2 | 2024-05-02 | 全麦面包 | 红烧牛肉面 | 蒜蓉西兰花 |
✅ 关键改进点说明：
- 使用
[...tr.querySelectorAll('.breakfast')]将 NodeList 转为真数组，支持链式map()； - 每个字段（
break/lunch/dinner）均返回字符串数组，完整保留该行所有对应餐次数据； - 添加
.trim()避免因空格或换行导致的脏数据； - 语义清晰：
break不再是单值，而是早餐列表，符合实际业务逻辑（如一日多餐）。
⚠️ 注意事项：
- 确保服务端渲染的 HTML 中，每个
<tr> 内 <code>.breakfast、.lunch、.dinner元素数量一致（或允许不等长），否则前端需额外校验； - 若需兼容旧版浏览器（如 IE），请将扩展运算符
[...xxx]替换为Array.from(xxx)； - 强烈建议在 Laravel 中提前处理 JSON 数据（如
json_decode($meal->mealdetails, true)），避免前端重复解析，提升性能与可维护性。
掌握 querySelector 与 querySelectorAll 的语义差异，是精准操作 DOM 集合的基础能力。从此，无论一行含几个同类元素，都能一网打尽。
