Как получить только согласованный элемент в DOM при использовании getElementByTagName?

Question

Я хочу получить один элемент в содержании, внутреннее HTML которого является «ЧТО-ТО». Имя тега

<div>

, и у него нет идентификатора.

<div class="hfvbuerfv iygerifyg r">
   <div class="iyg8ybwef g irfg">
      <div class="oiuh9 iyg y">SOMETHING</div>
      <div class="iojuiohi"></div>
   </div>
</div>

Я пробовал это:

var all = document.getElementsByTagName("div");
for (i=0; i<all.length; i++) {
   if (all[i].innerHTML.toString().includes("SOMETHING")) {
      console.log(all[i]);
   }
}

, но я также получаю все родительские div.

Учтите, что я не хочу использовать JQuery или XPATH. Я просто хочу сделать это с чистым javascript.

Answer 1

Причина, по которой вы также получаете все родительские узлы, потому что внутренний HTML родительских узлов содержит узел div с SOMETHING в нем. Я думаю, вам нужно добавить проверку того, что единственный дочерний элемент совпадающего узла div является текстовым узлом и содержит nodeValue "ЧТО-ТО":

function findSomethingNode() {
  var allDivs = document.getElementsByTagName('div');

  for (var i = 0; i < allDivs.length; ++i) {
    // Check for a single child that is a text node
    // (nodeType === 3) that has the text (nodeValue) "SOMETHING"
    if (allDivs[i].childNodes.length === 1 && allDivs[i].childNodes[0].nodeType === 3 && allDivs[i].childNodes[0].nodeValue === "SOMETHING") {
      return allDivs[i];
    }
  }
}

// This logs the found node
console.log(findSomethingNode());

<div class="hfvbuerfv iygerifyg r">
  <div class="iyg8ybwef g irfg">
    <div class="oiuh9 iyg y">SOMETHING</div>
    <div class="iojuiohi"></div>
  </div>
</div>

Answer 2

Код, который вы написали, находит блоки div до div, в котором присутствует текст.
Вы можете сохранить содержимое для каждой итерации, если условие удовлетворяет.
Таким образом, у вас будет последний div который соответствует условию в переменной.
И, наконец, распечатайте переменную.

Вы можете получить требуемый результат, набрав st

<div class="hfvbuerfv iygerifyg r">
   <div class="iyg8ybwef g irfg">
      <div class="oiuh9 iyg y">SOMETHING</div>
      <div class="iojuiohi"></div>
   </div>
</div>

<script type="text/javascript">
    var all = document.getElementsByTagName("div");
    for (i=0; i<all.length; i++) {
       if (all[i].innerHTML.toString().includes("SOMETHING")) {
          current = all[i]
       }
    }
    console.log(current);
</script>

Answer 3

includes также будет соответствовать родительскому элементу, поскольку он также будет включать «ЧТО-ТО».

Как и эти строки, также вернут true.

"SOMETHINGHERE".includes("SOMETHING")
"HERESOMETHING".includes("SOMETHING")

Если вы хотите получить точное совпадение, просто проверьте, совпадает ли innerHTML с

if (all[i].innerHTML == "SOMETHING" ) {
      console.log(all[i]);
   }