点击指定标签仅展示首个value值 如何获取当前点击标签的唯一属性值

• HTML规范要求id必须全局唯一，你给两个h1设置了相同的democlassid，本身不符合DOM规范，会导致元素选择异常
• JS代码中固定查询document.getElementsByTagName("H1")[0]，永远只会取到页面第一个h1元素，和你当前点击的元素没有关联，所以每次都返回第一个h1的属性值

1. 将重复的id替换为class，符合DOM规范
2. 自定义属性优先使用data-*规范写法（h1本身没有原生value属性，直接写value属于非规范自定义属性）
3. 点击事件中直接通过e.target获取当前被点击的元素，再读取对应属性值

修改后完整代码 #

HTML #

<h1 class="democlass" data-value="Goodbye">Goodbye </h1>
<h1 class="democlass" data-value="Hello">Hello </h1>

<p>点击对应h1标签即可展示其属性值</p>
<p id="demo">Here lies new text</p>

CSS #

.democlass {
  color: red;
}

JS #

addEventListener('click', function(e) {
  if (e.target && e.target.classList.contains('democlass')) {
    // 直接从当前点击的元素读取自定义属性
    const currentValue = e.target.dataset.value;
    document.getElementById("demo").innerHTML = currentValue;
  }
});

如果确实需要保留原有非规范的value属性写法，可将JS中取值逻辑替换为e.target.getAttribute('value')即可。

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