Question

作为我正在构建的Google Chrome扩展程序的一部分，我需要将一些代码注入到将为其DOM添加一些元素的网页中。

我遇到的一个问题是，当网页在每次加载时为它们创建不同的，不确定的ID时，如何选择特定的子元素。我在下面提供了一个例子。

假设outerDiv1和outerDiv2具有稳定的ID，我想用＆＃34; inner＆＃34;选择outerDiv2的子节点。上课，这样做的最佳方式是什么？

<div id = "outerDiv1">
   <div class = "random"></div>
   <div id = [INDETERMINATE] class = "inner"></div>
</div>
<div id = "outerDiv2">
   <div id = [INDETERMINATE] class = "inner"></div>
   <div class = "random"></div>
</div>

一种解决方案是创建一个这样的函数：

function findChildWithInnerClass(divID) {
   var children = divID.childNodes;

   for (var i = 0; i < children.length; i++) {
      if (children[i].className === "inner") {
         return children[i];
      }
   }
}

然后使用outerDiv2的live元素调用它。

然而，这似乎有点啰嗦。使用document.querySelector（）？

可以使用选择器更快地执行此操作

我只对纯JavaScript答案感兴趣，顺便说一句，请不要jQuery。

Answer 1

您可以使用document.querySelector("#outerDiv1 .inner")。

您可以使用任何CSS选择器。

它将返回一个节点。

如果您希望选择与您的选择器对应的所有节点，您可以使用document.querySelectorAll("#outerDiv1 .inner")，这将返回NodeList对象，例如document.getElementsByTagName。

IE8 +，Chrome 4 +，Firefox 3.5 +，Safari 3.2 +，Opera 10 +均支持此功能。

如何在具有不确定ID的情况下选择具有已知ID的div的子项？

1 个答案: