本文讲解如何使用 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 值。以下是优化后的完整解决方案：
<table>
<tbody>
<!-- 示例数据（由 Laravel Blade 渲染生成） -->
<tr>
<td>1</td>
<td>2024-05-01</td>
<td class="breakfast text-center table-primary">燕麦粥</td>
<td class="lunch text-center table-info">宫保鸡丁</td>
<td class="dinner text-center table-secondary">清蒸鱼</td>
<td class="breakfast text-center table-primary">水煮蛋</td>
<td class="lunch text-center table-info">番茄炒蛋</td>
<td class="dinner text-center table-secondary">紫菜汤</td>
</tr>
<tr>
<td>2</td>
<td>2024-05-02</td>
<td class="breakfast text-center table-primary">全麦面包</td>
<td class="lunch text-center table-info">红烧牛肉面</td>
<td class="dinner text-center table-secondary">蒜蓉西兰花</td>
</tr>
</tbody>
</table>
<script>
const tbody = document.querySelector('table tbody');
const outputArray = () => [...tbody.querySelectorAll('tr')].map(tr => ({
break: [...tr.querySelectorAll('.breakfast')].map(el => el.innerText.trim()),
lunch: [...tr.querySelectorAll('.lunch')].map(el => el.innerText.trim()),
dinner: [...tr.querySelectorAll('.dinner')].map(el => el.innerText.trim())
}));
console.log(outputArray());
// 输出示例：
// [
// { break: ["燕麦粥", "水煮蛋"], lunch: ["宫保鸡丁", "番茄炒蛋"], dinner: ["清蒸鱼", "紫菜汤"] },
// { break: ["全麦面包"], lunch: ["红烧牛肉面"], dinner: ["蒜蓉西兰花"] }
// ]
</script>✅ 关键改进点说明：
- 使用
[...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 集合的基础能力。从此，无论一行含几个同类元素，都能一网打尽。
