Как получить весь текстовый контент из дублирующего родительского класса с другим идентификатором?

Question

Я пытаюсь получить все текстовое содержимое родительского класса, обнаруженное addEventListener.

Код, который я использую, -

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

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

}, false);

, но проблема в том, что япытаюсь применить код, имеет то же имя класса с другим идентификатором, например -

<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 .

Как я могу получить весь текст из класса идентификатора, по которому я щелкнул, когда есть повторяющееся имя класса?Есть ли способ включить 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>