[解決済み] querySelectorAllを使用して直接の子を取得する

質問

こんなことができるようになりました。

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

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

の直接の子プロセスをすべて取得することができます。 myDiv 要素で、クラス .foo .

問題なのは、このように #myDiv に対してクエリを実行しているので、セレクタ内の myDiv 要素（だから、明らかに冗長です）。

を残すことができるはずです。 #myDiv をオフにすると、セレクタは正規の構文ではなくなる。 > .

セレクタが実行されている要素の直接の子だけを取得するセレクタの書き方をご存知の方はいらっしゃいますか？

どのように解決するのですか？

いい質問ですね。質問された時点では、quot;combinator rooted query" を行うための普遍的な実装方法（たとえば ジョン・レシグがそう呼んだ は存在しなかった。

では :スコープ 擬似クラスが導入されました。これは 対応 EdgeやIEの[Pre-Chrominum]バージョンではサポートされていますが、Safariではすでに数年前からサポートされています。それを利用すると、あなたのコードはこうなります。

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

なお、場合によっては .querySelectorAll で、他の昔ながらの DOM API 機能を使用します。たとえば myDiv.querySelectorAll(":scope > *") と書くだけです。 myDiv.children といった具合に。

それ以外の場合は、まだ :scope このような場合、カスタムフィルタロジックを追加しない限り、他の方法を思いつきません (例えば、find myDiv.getElementsByClassName("foo") その .parentNode === myDiv また、任意のセレクタ文字列を入力とし、マッチのリストを出力したいだけのコードパスをサポートしようとしている場合は、明らかに理想的ではありません。しかし、もしあなたが私のように、単に「ハンマーしか持っていない」と考えて行き詰まり、この質問をすることになったのなら、様々な種類の その他 DOMが提供するツールもあります。