如何使用原生 js 从 h3 获取文本？答案

【问题标题】：How to get text from h3 with native js?如何使用原生 js 从 h3 获取文本？
【发布时间】：2021-02-18 14:54:26
【问题描述】：

我有一些具有相同类的 h3 元素。当我单击其中一个元素时，我需要从 h3 获取文本。

document.querySelector(`.block__item__name`).onclick = function() {
  let value = this.textContent;
  console.log(value);
};

此代码仅适用于第一个 h3。我该如何解决？

【问题讨论】：

querySelector 只会匹配找到的第一个元素。请参阅 stackoverflow.com/questions/34482587/… 了解使用 querySelectorAll 的方法
哦，好的。那么如何解决我的问题呢？
谢谢。我尝试使用它，但它没有用。我想我确实在某个地方弄错了

标签： javascript

【解决方案1】：

const content = document.getElementsByClassName("titel");

for (let i = 0; i < content.length; i++) {
  content[i].addEventListener("click", function () {
    let value = this.textContent;
    console.log(value);
  });
}

您可以在这里试用：https://jsitor.com/EKnmSAr5J

【讨论】：

【解决方案2】：

根据文档，querySelector 为您提供查询的第一个结果。如果您想要所有结果，请使用querySelectorAll

document.querySelectorAll(`.block__item__name`)forEach(item => {
  item.onclick = function() {
   let value = this.textContent;
   console.log(value);
  };
});

【讨论】：