本文介绍在存在多个同名类名（如多个 `.quantity`）的情况下，如何通过 css 选择器精确定位并修改特定元素的 `innertext`，避免误改首个匹配项。
在实际前端开发中，常遇到结构相似、类名重复的 DOM 元素（例如商品列表中的多个 .quantity 容器）。若直接使用 document.querySelector('.quantity')，浏览器只会匹配文档中第一个符合选择器的元素，导致逻辑错误——正如问题中所示：它修改了 id="1" 的 quantity，而非目标 id="2" 的那个。
✅ 正确做法：利用层级关系与伪类精确定位
最推荐且语义清晰的方式是结合父容器的结构特征进行定位。例如，要修改第二个 .item 内部的 .quantity，可使用：
document.querySelector('.item:nth-child(2) .quantity').innerText = '2';该选择器含义为：
- .item:nth-child(2) → 选取其父元素（即 #shop）下第二个子元素，且该子元素具有 class="item"；
- .quantity → 在该 .item 内部向下查找首个匹配的 .quantity 元素（此处即 <div id="2" class="quantity">）。
✅ 注意：nth-child(2) 基于DOM 树中的位置顺序，而非 .item 类的出现序号。本例中两个 .item 是 #shop 的连续子节点，因此完全适用。若中间插入其他类型元素（如注释、<span>），需改用 :nth-of-type(2) 或更健壮的选择策略。
? 更可靠方案：优先使用唯一 ID（最佳实践）
虽然上述方法可行，但HTML 规范要求 id 属性必须唯一。当前示例中 id="1" 和 id="2" 同时出现在多个地方（如 .item 与内部 .quantity），违反规范，易引发不可预期行为（如 getElementById('1') 返回结果不确定）。
立即学习“前端免费学习笔记（深入）”；
✅ 推荐重构 HTML（若可控）：
<div class="shop" id="shop">
<div id="item-1" class="item">
<div class="details">
<div class="buttons">
<div id="qty-1" class="quantity">1</div>
</div>
</div>
</div>
<div id="item-2" class="item">
<div class="details">
<div class="buttons">
<div id="qty-2" class="quantity">0</div>
</div>
</div>
</div>
</div>此时可安全、高效地操作：
document.getElementById('qty-2').innerText = '5'; // 精准无歧义⚠️ 补充说明与注意事项
- querySelector() 仅返回第一个匹配元素；如需批量操作，应使用 querySelectorAll() 配合遍历；
- 若需动态定位（如根据数据索引更新第 N 个 item），可构造模板字符串：
const index = 2; document.querySelector(`.item:nth-child(${index}) .quantity`).innerText = 'updated'; - 避免依赖 innerHTML 修改纯文本内容——除非需渲染 HTML；否则优先使用 textContent（更安全、防 XSS）或 innerText（考虑样式隐藏）；
- 在 Vue/React 等框架中，此类 DOM 操作应让位于响应式数据绑定，原生 JS 场景下才需手动干预。
掌握层级选择与唯一标识的协同使用，是编写健壮、可维护前端代码的关键基础。
