javascript - 如何从具有不同 Id 的重复父类中获取所有文本内容？

Question

我正在尝试获取由 addEventListener 检测到的父类的所有文本内容。

我使用的代码是-

document.addEventListener('click',function (event) {
var text = document.getElementsByClassName(event.target.parentElement.parentElement.parentElement.className); 

console.log(text[0].innerText);

}, false);

但问题是，在我尝试应用代码的地方，具有相同的类名和不同的 id，例如-

<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.0">

和

<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.1">

具有相同的 ClassName (sc-EHOje gMuVTh) 但不同的 id (extraTitle_70356820.1 和 extraTitle_70356820.0)，所以如果我只使用 ClassName，我总是会得到 id extraTitle_70356820.0 的文本，即使我点击 extraTitle_70356820.1。

当有重复的类名时，如何从我点击的id的类中获取所有文本？有没有办法同时合并 ClassName 和 id 以从父级获取文本？

Answer 1

我更改了最初的答案，因为我意识到我认为您也想要最上面的父文本以及您单击的元素的文本？不确定这个答案是否适合您，但这是我的看法。

//var classname = document.getElementsByClassName("sc-EHOje gMuVTh");

//for (var i = 0; i < classname.length; i++) {
// classname[i].addEventListener('click', function() {
// console.log(this.parentElement.parentElement.parentElement.innerText);
// });
//}


// 24/09 edit

var target = "sc-EHOje gMuVTh";
document.addEventListener('click', function(event) {
  if (event.target.className === target) {
    var parentElemText = event.target.parentElement.parentElement.parentElement.innerText;
    console.log(parentElemText);
  }
});

.upperMostParent {
  width: 200px;
  height: 200px;
  background: red;
  margin: 1rem;
  position: relative;
}

.secondUpper {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 1rem;
  padding: 1rem;
}

.thirdUpper {
  width: 70px;
  height: 50px;
  background: green;
  padding: 1rem;
}

.sc-EHOje.gMuVTh {
  background: yellow;
  width: 50px;
  height: 50px;
}

<div class="upperMostParent">
  Parent text content 1
  <div class="secondUpper">
    <div class="thirdUpper">
      <div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.0">Some text content</div>
    </div>
  </div>
</div>

<div class="upperMostParent">
  Parent text content 2
  <div class="secondUpper">
    <div class="thirdUpper">
      <div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.1">Some more text</div>
    </div>
  </div>
</div>