7

次のような HTML 構造があるとします。

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

querySelectorAll を使用して「a」の子に対してクエリを実行するには、次のようなことができます

//Get "b", but not "c"
document.querySelectorAll('#a > div')

私の質問は、ノードを直接参照して、ID なしでこれを行うことは可能ですか? やってみた

var a_div = document.getElementById('a')
a_div.querySelectorAll('> div') //<-- error here

しかし、使用したセレクターが無効であるというエラーが表示されます。

そして、誰かが疑問に思っている場合に備えて、私の実際の使用例は '> .foo .bar .baz' のようなもっと複雑なものになるので、手動の DOM トラバーサルは避けたいと思います。現在、一時IDをルートdivに追加していますが、それは醜いハックのようです...

4

3 に答える 3

11 
document.querySelector('#a').querySelectorAll(':scope > div')

ブラウザーのサポートについてはよくわかりませんが、chrome および chrome モバイル パッケージ アプリで使用しており、正常に動作します。

于 2014-11-29T08:18:06.137 に答える
5

いいえ、その要素への参照を使用せずに、その要素のすべての子を参照する方法は(まだ)ありません。親要素と子要素の間の関係を表す子コンビネータ>であるため、単純なセレクター（親）が必要です（例にはありません）。

コメントの中で、BoltClock は、セレクター API レベル 2 仕様が定義するメソッド名が変更される可能性があると述べました。 . これが実装されると、次のように使用できます。findAll 

a_div.findAll('> div');
于 2012-07-11T20:18:31.567 に答える
-1

私はあなたの質問を誤解しているに違いないと思いますが、これは私がそれを解釈する方法です..

var a = document.getElementById('a')
var results = a.querySelectorAll('div');

結果はすべての子 div を保持します。

于 2012-07-11T20:20:03.433 に答える