本文详解如何修复因多个元素共用同一 ID（如 id="productName"）而导致 JavaScript 只能获取首个元素内容的问题，提供基于 DOM 遍历的健壮方案，并附完整可运行示例。
本文详解如何修复因多个元素共用同一 id（如 `id="productname"`）而导致 javascript 只能获取首个元素内容的问题，提供基于 dom 遍历的健壮方案，并附完整可运行示例。
在 HTML 和 JavaScript 开发中，id 属性的核心语义是唯一标识符——W3C 规范明确要求同一文档内所有 id 值必须互不相同。您原始代码中为多个 <a> 标签重复设置 id="productName"，这不仅违反标准，更直接导致 document.getElementById("productName") 永远只返回第一个匹配元素（即 "Product A"），从而造成数据传递失真。
要实现“点击任意产品按钮，准确传递对应产品名称至目标页面”，关键在于放弃全局 ID 查找，转而采用上下文感知的 DOM 定位策略。以下是推荐的现代化、可维护的实现方式：
✅ 正确做法：基于事件源与 DOM 结构动态定位
首先，修正 HTML 结构，移除非法重复 ID，改用语义化且可复用的 class：
<!-- html1.html --> <div class="shop-content"> <span class="product-name">Product A</span> <button type="button" class="inquire-btn">Inquire</button> </div> <div class="shop-content"> <span class="product-name">Product B</span> <button type="button" class="inquire-btn">Inquire</button> </div> <div class="shop-content"> <span class="product-name">Product C</span> <button type="button" class="inquire-btn">Inquire</button> </div>
? 注意：已移除无 href 的 <a> 标签（语义冗余），改用 <span> 表达静态文本；同时修复了原代码中缺失闭合标签（如 </button>）及拼写错误（如 <spanclass=）。
立即学习“前端免费学习笔记（深入）”；
接着，使用事件委托 + DOM 遍历精准提取目标文本：
<!-- html1.html 中的脚本 -->
<script>
function sendData(event) {
// 1. 从被点击的按钮出发，向上查找最近的 .shop-content 父容器
const container = event.target.closest('.shop-content');
// 2. 在该容器内查找 .product-name 元素并获取其文本内容
const productName = container.querySelector('.product-name').textContent.trim();
// 3. 构造带参数的跳转 URL
const url = `html2.html?productName=${encodeURIComponent(productName)}`;
// 执行跳转（开发时可先 console.log(url) 调试）
window.location.href = url;
}
// 为所有 .inquire-btn 按钮绑定点击事件（推荐：解耦 HTML 与 JS）
document.querySelectorAll('.inquire-btn').forEach(btn => {
btn.addEventListener('click', sendData);
});
</script>✅ html2.html：安全解析 URL 参数
为提升健壮性，建议使用现代 URL API 替代手动字符串分割（避免因特殊字符或空参数引发异常）：
<!-- html2.html -->
<input type="text" name="subject" placeholder="Subject*" id="productSubject" required />
<script>
window.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(window.location.search);
const productName = urlParams.get('productName') || 'Unknown Product';
document.getElementById('productSubject').value = decodeURIComponent(productName);
});
</script>⚠️ 关键注意事项
- ID 不可复用：永远不要为多个元素分配相同 id；需唯一标识时请使用 data-* 属性（如 data-product-id="101"）。
- 避免内联事件处理器：onclick="..." 将逻辑硬编码在 HTML 中，不利于维护与测试；应统一使用 addEventListener。
- URL 编码/解码必须成对使用：encodeURIComponent() 保障特殊字符（如空格、中文）安全传输，decodeURIComponent() 在接收端还原。
- 容错处理不可少：querySelector 可能返回 null，生产环境建议添加存在性判断（示例中已简化，实际项目请补充 if (container && productSpan) 校验）。
此方案完全脱离 ID 依赖，利用 DOM 层级关系实现精准上下文定位，既符合 Web 标准，又具备良好的可扩展性与可读性。无论新增多少产品区块，逻辑均无需修改，真正实现“一次编写，随处可用”。
