如何通过同一JS onclick事件获取点击div内的p、span内容

你的问题根源很明确——你提前全局获取了所有的<p>和<span>标签，所以不管点击哪个.tag div，代码都会遍历所有全局的p标签输出内容。要解决这个问题，核心是只在当前被点击的div范围内查找对应的子元素，下面给你几种可行的修改方案：

方案一：使用this定位当前点击元素 + querySelector查找子节点 #

直接在点击事件里，通过this拿到当前被点击的.tag元素，再在它内部查找p和span：

var tags = document.getElementsByClassName("tag");
for (var i = 0; i < tags.length; i++) {
    tags[i].onclick = function() {
        // 仅在当前点击的div内查找p和span
        const pContent = this.querySelector("p").innerHTML;
        const spanContent = this.querySelector("span").innerHTML;
        console.log(pContent, spanContent);
    }
}

方案二：使用getElementsByTagName在当前元素内查找 #

如果习惯用getElementsByTagName，也可以这样写，同样限定在当前元素范围内：

var tags = document.getElementsByClassName("tag");
for (var i = 0; i < tags.length; i++) {
    tags[i].onclick = function() {
        var pTag = this.getElementsByTagName("p")[0];
        var sTag = this.getElementsByTagName("span")[0];
        console.log(pTag.innerHTML, sTag.innerHTML);
    }
}

方案三：ES6更简洁的写法（推荐） #

用querySelectorAll配合forEach遍历，再用addEventListener绑定事件，代码更清晰，也支持多个事件监听：

document.querySelectorAll(".tag").forEach(tag => {
    tag.addEventListener("click", function() {
        // 用textContent代替innerHTML更安全，避免HTML解析风险
        const pText = this.querySelector("p").textContent;
        const spanText = this.querySelector("span").textContent;
        console.log(pText, spanText);
    });
});

关键知识点总结 #

• this在点击事件中指向当前被点击的DOM元素，这是定位目标的核心
• 不要提前全局获取所有p/span，而是在点击时动态在当前元素内部查找子节点，这样就能精准拿到对应内容
• 如果只需要文本内容，优先用textContent而不是innerHTML，更安全且性能更好

内容的提问来源于stack exchange，提问作者alittlecurryhot