☰

querySelectorAll を使用して直接の子を取得する 質問する

tag-icon • tag-icon javascript dom css-selectors
querySelectorAll を使用して直接の子を取得する 質問する

私はこれができます:

<div id="myDiv">
   <div class="foo"></div>
</div>

myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");

つまり、myDivクラスを持つ要素の直接の子をすべて正常に取得できます.foo。

問題は、要素#myDivに対してクエリを実行しているため、セレクターにを含める必要があることですmyDiv(したがって、明らかに冗長です)。

を省略できるはずです#myDivが、セレクターは で始まるため、有効な構文ではありません>。

セレクターが実行されている要素の直接の子だけを取得するセレクターの書き方を知っている人はいますか?

ベストアンサー1

いい質問ですね。質問された当時は、「コンビネータルートクエリ」を実行するための普遍的に実装された方法（ジョン・レシグは彼らに電話した） 存在しなかった。

さて、：範囲擬似クラスが導入されました。サポートされているこれは、Edge や IE の [Chrominum 以前] のバージョンではサポートされていませんが、Safari では数年前からサポートされています。これを使用すると、コードは次のようになります。

let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

場合によっては、 をスキップし.querySelectorAllて他の古き良き DOM API 機能を使用することもできます。たとえば、 の代わりにmyDiv.querySelectorAll(":scope > *")と記述することもできますmyDiv.children。

それ以外の場合、まだ に依存できない場合は、カスタム フィルター ロジック (たとえば、の:scope検索) を追加せずに状況を処理する別の方法は思いつきません。また、任意のセレクター文字列を入力として受け取り、一致リストを出力として受け取るだけのコード パスを 1 つサポートしようとしている場合は、明らかに理想的ではありません。ただし、私のように、単に「ハンマーしか持っていない」と思って行き詰まってこの質問をすることになった場合は、DOM が提供するさまざまな他のツールもあることを忘れないでください。myDiv.getElementsByClassName("foo").parentNode === myDiv

おすすめ記事