未確定のIDを持つ既知のIDを持つdivの子供を選択するにはどうすればよいですか？

Question

私が構築しているGoogle Chrome拡張機能の一部として、DOMにいくつかの要素を追加するウェブページにコードを注入する必要があります。

私が遭遇した1つの問題は、ウェブページがそれぞれの負荷で異なる、不確定なIDを作成するときに特定の子要素を選択する方法です。私は以下の例を提供しました。

outerDiv1とouterDiv2が安定したIDを持ち、outerクラスの子をinnerクラスで選択したいとしたら、これを行う最善の方法は何ですか？

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

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

そして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> 

一つの解決策は、このような関数を作成することです。

しかし、これは少し長めのようです。 document.querySelector（）を使用して適用できるセレクタでこれを行うより速い方法がありますか？

純粋なJavaScriptの回答のみに興味があります。ところで、jQueryは必要ありません。

Answer 1

document.querySelector("#outerDiv1 .inner")を使用できます。

任意のCSSセレクタを使用できます。

ノードが1つ返されます。

セレクタに対応するすべてのノードを選択する場合は、document.querySelectorAll("#outerDiv1 .inner")を使用できます。NodeListオブジェクトを返します（document.getElementsByTagNameなど）。

これはIE8 +、Chrome 4以降、Firefox 3.5以降、Safari 3.2以降、Opera 10以降でサポートされています。