Verwenden von querySelectorAll zum Abrufen direkter untergeordneter Elemente

Ich kann das:

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

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

Das heißt, ich kann erfolgreich alle direkten untergeordneten myDivElemente des Elements mit Klasse abrufen .foo.

Das Problem ist, es stört mich, dass ich das #myDivin den Selektor aufnehmen muss, weil ich die Abfrage für das myDivElement ausführe (es ist also offensichtlich redundant).

Ich sollte in der Lage sein, das #myDivAus zu lassen, aber dann ist der Selektor keine legale Syntax, da er mit a beginnt >.

Weiß jemand, wie man einen Selektor schreibt, der nur die direkten untergeordneten Elemente des Elements erhält, auf dem der Selektor ausgeführt wird?

Gute Frage. Zu der Zeit, als es gefragt wurde, gab es keine universell implementierte Möglichkeit, "kombinatorisch verwurzelte Abfragen" (wie John Resig sie nannte ) durchzuführen .

Nun wurde die Pseudoklasse: scope eingeführt. Es wird in [Pre-Chrominum] -Versionen von Edge oder IE nicht unterstützt , wird jedoch bereits seit einigen Jahren von Safari unterstützt. Damit könnte Ihr Code werden:

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

Beachten Sie, dass Sie in einigen Fällen auch .querySelectorAllandere gute, altmodische DOM-API-Funktionen überspringen und verwenden können. Zum Beispiel myDiv.querySelectorAll(":scope > *")könnten Sie stattdessen einfach schreiben myDiv.children.

Andernfalls, wenn Sie sich noch nicht darauf verlassen können :scope, kann ich mir keinen anderen Weg vorstellen, um mit Ihrer Situation umzugehen, ohne mehr benutzerdefinierte Filterlogik hinzuzufügen (z. B. myDiv.getElementsByClassName("foo")deren zu finden .parentNode === myDiv), und natürlich nicht ideal, wenn Sie versuchen, einen Codepfad wirklich zu unterstützen Ich möchte nur eine beliebige Auswahlzeichenfolge als Eingabe und eine Liste von Übereinstimmungen als Ausgabe verwenden! Aber wenn Sie wie ich diese Frage gestellt haben, nur weil Sie nicht weiter dachten: "Alles, was Sie hatten, war ein Hammer", vergessen Sie nicht, dass das DOM auch eine Vielzahl anderer Tools anbietet.

Weiß jemand, wie man einen Selektor schreibt, der nur die direkten untergeordneten Elemente des Elements erhält, auf dem der Selektor ausgeführt wird?

Die richtige Methode zum Schreiben eines Selektors, der im aktuellen Element "verwurzelt" ist, ist die Verwendung :scope.

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

Die Browserunterstützung ist jedoch begrenzt und Sie benötigen eine Unterlegscheibe, wenn Sie sie verwenden möchten. Zu diesem Zweck habe ich scopedQuerySelectorShim erstellt .

Hier ist eine flexible Methode, die in Vanilla JS geschrieben ist und es Ihnen ermöglicht, eine CSS-Selektorabfrage nur über die direkten untergeordneten Elemente eines Elements auszuführen:

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;
}

Wenn Sie sicher sind, dass das Element eindeutig ist (z. B. Ihr Fall mit der ID):

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

Für eine "globalere" Lösung: (Verwenden Sie einen Matchselector-Shim )

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;
}

Wo elmist Ihr übergeordnetes Element und selist Ihr Selektor. Könnte auch als Prototyp verwendet werden.

Die folgende Lösung unterscheidet sich von den bisher vorgeschlagenen und funktioniert für mich.

Das Grundprinzip ist, dass Sie zuerst alle übereinstimmenden Kinder auswählen und dann diejenigen herausfiltern, die keine direkten Kinder sind. Ein Kind ist ein direktes Kind, wenn es kein übereinstimmendes Elternteil mit demselben Selektor hat.

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!

Ich habe eine Funktion erstellt, um mit dieser Situation umzugehen, und dachte, ich würde sie teilen.

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;
}

Im Wesentlichen generieren Sie eine Zufallszeichenfolge (die randomString-Funktion ist hier ein importiertes npm-Modul, aber Sie können Ihre eigene erstellen.). Verwenden Sie dann diese Zufallszeichenfolge, um sicherzustellen, dass Sie das erwartete Element im Selektor erhalten. Dann können Sie das >danach verwenden.

Der Grund, warum ich das ID-Attribut nicht verwende, ist, dass das ID-Attribut möglicherweise bereits verwendet wird und ich dies nicht überschreiben möchte.

Nun, wir können problemlos alle direkten untergeordneten Elemente eines Elements verwenden childNodesund Vorfahren mit einer bestimmten Klasse mit auswählen. querySelectorAllEs ist also nicht schwer vorstellbar, dass wir eine neue Funktion erstellen können, die beides erhält und beide vergleicht.

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;
}

Hinweis: Dies gibt ein Array von Knoten zurück, keine NodeList.

Verwendung

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

Ich möchte hinzufügen, dass Sie die Kompatibilität von : scope erweitern können, indem Sie dem aktuellen Knoten nur ein temporäres Attribut zuweisen.

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");

Ich wäre mitgegangen

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

Ich mache das nur, ohne es zu versuchen. Würde das funktionieren?

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

Probieren Sie es aus, vielleicht funktioniert es vielleicht nicht. Apolovies, aber ich bin jetzt nicht auf einem Computer, um es zu versuchen (Antwort von meinem iPhone).