使用 getElementsByTagName 时如何只获取 DOM 中的匹配元素？

Question

我想获取内容中的一个元素，它的 innerHTML 是“SOMETHING”。标签名称是

<div>

而且没有id。

<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

includes 也将匹配父级，因为它也将包含“SOMETHING”。

像这些字符串也将 return 为真。

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

如果您想要完全匹配，只需检查 innerHTML 是否相同

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

Answer 2

您获得所有父节点的原因也是因为父节点的 innerHTML 包含 div 节点，其中包含 SOMETHING。我认为您需要添加一个检查，以确保匹配的 div 节点的唯一子节点是文本节点并且包含“SOMETHING”的节点值：

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 3

您编写的代码正在查找 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>

使用 getElementsByTagName 时如何只获取 DOM 中的匹配元素？

How to get only matched element in DOM when using getElementByTagName?

javascript

dom

getelementsbytagname