Javascript 当具有不确定ID时，如何选择具有已知ID的div的子级？

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

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

假设outerDiv1和outerDiv2有稳定的ID，并且我想选择带有内部类的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。

您可以使用document.queryselectoroutediv1.inner

您可以使用任何CSS选择器

如果找不到任何内容，它将返回一个节点或null

如果希望选择与选择器对应的所有节点，可以使用document.queryselectoralloutediv1.inner，它将返回一个NodeList对象，如document.getElementsByTagName

---

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

如果您对包含.inner的Childdiv感兴趣，可以使用document.querySelector all'outerDiv1.inner'；你想达到什么目的？从它的声音，你想拿起一个特定的dom元素在儿童点击事件，并处理它？冒泡起来，但你是从一个自上而下的时尚传播编码。如果您不能在dom树的更深处唯一地标识用户交互点，那么用户交互的自顶向下编码总是很困难的。您可以使用document.queryselectoroutediv1.inner…它将返回节点列表对象-不，它不会；document.querySelector将返回DOM节点（文档中找到的第一个与提供的选择器匹配的节点）或null；您可能正在考虑document.querySelectorAll。