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

私はこれを行うことができます：

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

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

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

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

#myDivオフのままにしておくべきですが、セレクタはで始まるため、正しい構文ではありません>。

セレクターが実行されている要素の直接の子だけを取得するセレクターの作成方法を誰かが知っていますか？

良い質問。質問された当時、「John Resigがそれらを呼んでいたように」「combinator rooted query」を実行する普遍的に実装された方法は存在しませんでした。

今：スコープ疑似クラスが導入されました。それはされていない、サポートエッジまたはIEの[前Chrominum]バージョンで、すでに数年前からのSafariでサポートされています。これを使用すると、コードは次のようになります。

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

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

それ以外の場合:scope、まだ信頼できない場合、カスタムフィルターロジックを追加せずに状況を処理する別の方法（たとえば、who myDiv.getElementsByClassName("foo")を見つける.parentNode === myDiv）を考えることはできません。任意のセレクター文字列を入力として受け取り、一致のリストを出力として受け取りたいだけです！しかし、私のように「ハンマーでした」と思って動けなくなっただけでこの質問をしてしまった場合は、DOM の他にもさまざまなツールがあることを忘れないでください。

セレクターが実行されている要素の直接の子だけを取得するセレクターの作成方法を誰かが知っていますか？

現在の要素に「ルート」されたセレクターを書き込む正しい方法は、を使用すること:scopeです。

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

ただし、 ブラウザのサポートには制限があり、使用する場合はシムが必要になります。私が建てscopedQuerySelectorShimを、この目的のために。

バニラJSで記述された柔軟なメソッドを次に示します。これにより、要素の直接の子に対してのみCSSセレクタークエリを実行できます。

var count = 0;
function queryChildren(element, selector) {
  var id = element.id,
      guid = element.id = id || 'query_children_' + count++,
      attr = '#' + guid + ' > ',
      selector = attr + (selector + '').replace(',', ',' + attr, 'g');
  var result = element.parentNode.querySelectorAll(selector);
  if (!id) element.removeAttribute('id');
  return result;
}

要素が一意であることを確実に知っている場合（IDのケースなど）：

myDiv.parentElement.querySelectorAll("#myDiv > .foo");

より「グローバルな」ソリューションの場合：（matchesSelectorシムを使用）

function getDirectChildren(elm, sel){
    var ret = [], i = 0, l = elm.childNodes.length;
    for (var i; i < l; ++i){
        if (elm.childNodes[i].matchesSelector(sel)){
            ret.push(elm.childNodes[i]);
        }
    }
    return ret;
}

どこelmあなたの親要素であり、selあなたの選択です。完全にプロトタイプとしても使用できます。

次の解決策はこれまでに提案されたものとは異なり、私にとってはうまくいきます。

根拠は、最初に一致するすべての子を選択し、次に直接の子ではない子を除外することです。同じセレクターを持つ一致する親がない場合、子は直接の子です。

function queryDirectChildren(parent, selector) {
    const nodes = parent.querySelectorAll(selector);
    const filteredNodes = [].slice.call(nodes).filter(n => 
        n.parentNode.closest(selector) === parent.closest(selector)
    );
    return filteredNodes;
}

HTH！

共有したいと思って、このような状況を処理する関数を作りました。

getDirectDecendent(elem, selector, all){
    const tempID = randomString(10) //use your randomString function here.
    elem.dataset.tempid = tempID;

    let returnObj;
    if(all)
        returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
    else
        returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);

    elem.dataset.tempid = '';
    return returnObj;
}

本質的には、ランダム文字列を生成することです（ここでランダム文字列関数はインポートされたnpmモジュールですが、独自に作成できます）。その後、そのランダム文字列を使用して、セレクターで期待する要素を確実に取得します。その後、その後は自由に使用できます>。

id属性を使用していない理由は、id属性がすでに使用されている可能性があり、それを上書きしたくないためです。

要素の直接の子をすべて使用して簡単に取得childNodesでき、特定のクラスの祖先をで選択querySelectorAllできるため、両方を取得して2つを比較する新しい関数を作成できると想像するのは難しくありません。

HTMLElement.prototype.queryDirectChildren = function(selector){
  var direct = [].slice.call(this.directNodes || []); // Cast to Array
  var queried = [].slice.call(this.querySelectorAll(selector) || []); // Cast to Array
  var both = [];
  // I choose to loop through the direct children because it is guaranteed to be smaller
  for(var i=0; i<direct.length; i++){
    if(queried.indexOf(direct[i])){
      both.push(direct[i]);
    }
  }
  return both;
}

注：これは、NodeListではなく、ノードの配列を返します。

使用法

 document.getElementById("myDiv").queryDirectChildren(".foo");

現在のノードに一時的な属性を割り当てるだけで：scopeの互換性を拡張できることを付け加えておきます。

let node = [...];
let result;

node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .bar");
// And, of course, you can also use other combinators.
result = window.document.querySelectorAll("[foo] + .bar");
result = window.document.querySelectorAll("[foo] ~ .bar");
node.removeAttribute("foo");

私は行ってきたでしょう

var myFoo = document.querySelectorAll("#myDiv > .foo");
var myDiv = myFoo.parentNode;

やってみないでやってるだけです。これはうまくいくでしょうか？

myDiv = getElementById("myDiv");
myDiv.querySelectorAll(this.id + " > .foo");

試してみてください。うまくいかないかもしれません。Apolovies、しかし私は今コンピュータを使ってそれを試すことはできません（私のiPhoneからの返信）。