如何从具有不同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，即使我单击extraTitle_70356820.1，我总是会得到idextraTitle_70356820.0的文本。

当存在重复的类名时，如何从我单击的 id 的类中获取所有文本？有没有办法同时合并类名和 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>