querySelector sucht sofort untergeordnete Elemente

Ich habe eine jquery-ähnliche Funktion:

function(elem) {
    return $('> someselector', elem);
};

Die Frage ist, wie kann ich dasselbe tun querySelector()?

Das Problem ist, dass die >Auswahl in querySelector()der übergeordneten Angabe explizit angegeben werden muss. Gibt es eine Problemumgehung?

Obwohl dies keine vollständige Antwort ist, sollten Sie die W3C Selector API v.2 im Auge behalten, die in den meisten Browsern sowohl auf dem Desktop als auch auf dem Handy bereits verfügbar ist, mit Ausnahme des IE (Edge scheint dies zu unterstützen): Siehe vollständige Supportliste .

function(elem) {
  return elem.querySelectorAll(':scope > someselector');
};

Das kannst du nicht. Es gibt keinen Selektor, der Ihren Startpunkt simuliert.

Die Art und Weise, wie jQuery dies tut (eher aufgrund eines qsaVerhaltens, das nicht ihren Wünschen entspricht), besteht darin, dass sie prüfen, ob elemeine ID vorhanden ist, und wenn nicht, vorübergehend eine ID hinzufügen und dann eine vollständige Auswahlzeichenfolge erstellen.

Grundsätzlich würden Sie tun:

var sel = '> someselector';
var hadId = true;
if( !elem.id ) {
    hadID = false;
    elem.id = 'some_unique_value';
}

sel = '#' + elem.id + sel;

var result = document.querySelectorAll( sel );

if( !hadId ) {
    elem.id = '';
}

Dies ist sicherlich kein jQuery-Code, aber soweit ich mich erinnere, ist es im Grunde das, was sie tun. Nicht nur in dieser Situation, sondern in jeder Situation, in der Sie einen Selektor aus dem Kontext eines verschachtelten Elements ausführen.

Quellcode für Sizzle

Komplett: Scope Polyfill

Wie avetisk hat genannten Selektoren API 2 verwendet :scopePseudo-Selektor.
Damit dies in allen Browsern (die diese unterstützen querySelector) funktioniert , ist hier die Polyfüllung

(function(doc, proto) {
  try { // check if browser supports :scope natively
    doc.querySelector(':scope body');
  } catch (err) { // polyfill native methods if it doesn't
    ['querySelector', 'querySelectorAll'].forEach(function(method) {
      var nativ = proto[method];
      proto[method] = function(selectors) {
        if (/(^|,)\s*:scope/.test(selectors)) { // only if selectors contains :scope
          var id = this.id; // remember current element id
          this.id = 'ID_' + Date.now(); // assign new unique id
          selectors = selectors.replace(/((^|,)\s*):scope/g, '$1#' + this.id); // replace :scope with #ID
          var result = doc[method](selectors);
          this.id = id; // restore previous id
          return result;
        } else {
          return nativ.call(this, selectors); // use native code for other selectors
        }
      }
    });
  }
})(window.document, Element.prototype);

Verwendung

node.querySelector(':scope > someselector');
node.querySelectorAll(':scope > someselector');

Aus historischen Gründen meine bisherige Lösung

Basierend auf allen Antworten

// Caution! Prototype extending
Node.prototype.find = function(selector) {
    if (/(^\s*|,\s*)>/.test(selector)) {
        if (!this.id) {
            this.id = 'ID_' + new Date().getTime();
            var removeId = true;
        }
        selector = selector.replace(/(^\s*|,\s*)>/g, '$1#' + this.id + ' >');
        var result = document.querySelectorAll(selector);
        if (removeId) {
            this.id = null;
        }
        return result;
    } else {
        return this.querySelectorAll(selector);
    }
};

Verwendung

elem.find('> a');

Wenn Sie den Tag-Namen des Elements kennen, das Sie untersuchen, können Sie ihn im Selektor verwenden, um das zu erreichen, was Sie möchten.

Zum Beispiel, wenn Sie ein haben <select>, das <option>s und hat <optgroups>, und Sie nur das <option>s wollen, das seine unmittelbaren Kinder sind, nicht die darin <optgoups>:

<select>
  <option>iPhone</option>
  <optgroup>
    <option>Nokia</option>
    <option>Blackberry</option>
  </optgroup>
</select>

Wenn Sie also einen Verweis auf das ausgewählte Element haben, können Sie - überraschenderweise - seine unmittelbaren Kinder wie folgt erhalten:

selectElement.querySelectorAll('select > option')

Es scheint in Chrome, Safari und Firefox zu funktionieren, wurde jedoch nicht in IEs getestet. = /

Wenn Sie eventuell direkte Kinder finden möchten (und nicht zB > div > span), können Sie Element.matches () ausprobieren :

const elems = Array.from(elem.children).filter(e => e.matches('.my-class'))

ANSPRUCH

Persönlich würde ich die Antwort von Patrick Dw nehmen und +1 seine Antwort, meine Antwort ist für die Suche nach einer alternativen Lösung. Ich denke nicht, dass es eine Ablehnung verdient.

Hier ist mein Versuch:

function q(elem){
    var nodes = elem.querySelectorAll('someSeletor');
    console.log(nodes);
    for(var i = 0; i < nodes.length; i++){
        if(nodes[i].parentNode === elem) return nodes[i];
    }
}

siehe http://jsfiddle.net/Lgaw5/8/

Das hat bei mir funktioniert:

Node.prototype.search = function(selector)
{
    if (selector.indexOf('@this') != -1)
    {
        if (!this.id)
            this.id = "ID" + new Date().getTime(); 
        while (selector.indexOf('@this') != -1)
            selector = selector.replace('@this', '#' + this.id);
        return document.querySelectorAll(selector);
    } else 
        return this.querySelectorAll(selector);
};

Sie müssen das @ dieses Schlüssels vor dem> übergeben, wenn Sie nach unmittelbaren Kindern suchen möchten.

Das Folgende ist eine vereinfachte, generische Methode zum Ausführen einer CSS-Selektorabfrage nur über direkte untergeordnete Abfragen. Sie berücksichtigt auch kombinierte Abfragen wie "foo[bar], baz.boo":

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


*** Example Use ***

queryChildren(someElement, '.foo, .bar[xyz="123"]');

Es gibt eine abfragebezogene Bibliothek, die ein praktischer Ersatz für die Abfrageselektion ist . Es füllt den Kinder-Selektor '> *'und :scope(inkl. IE8) mehrfach aus und normalisiert den :rootSelektor. Außerdem stellt es einige spezielle relativ pseudos wie :closest, :parent, :prev, :next, für alle Fälle.

Überprüfen Sie, ob das Element eine andere ID hat. Fügen Sie eine zufällige ID hinzu und suchen Sie danach

function(elem) {
      if(!elem.id)
          elem.id = Math.random().toString(36).substr(2, 10);
      return elem.querySelectorAll(elem.id + ' > someselector');
    };

wird das Gleiche tun wie

$("> someselector",$(elem))