querySelector recherche les enfants immédiats

J'ai une fonction de type jquery:

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

La question est de savoir comment puis-je faire la même chose avec querySelector()?

Le problème est que le >sélecteur dans querySelector()nécessite que le parent soit explicitement spécifié. Y a-t-il une solution de contournement?

Bien que ce ne soit pas une réponse complète, vous devriez garder un œil sur l' API du sélecteur W3C v.2 qui est déjà disponible dans la plupart des navigateurs, à la fois de bureau et mobiles, sauf IE (Edge semble prendre en charge): voir la liste complète du support .

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

Vous ne pouvez pas. Il n'y a pas de sélecteur qui simulera votre point de départ.

La façon dont jQuery le fait (plus à cause d'une manière qui qsane leur convient pas), c'est qu'ils vérifient si elema un ID, et sinon, ils ajoutent temporairement un ID, puis créent une chaîne de sélection complète.

En gros, vous feriez:

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

Ce n'est certainement pas du code jQuery, mais d'après ce dont je me souviens, c'est essentiellement ce qu'ils font. Pas seulement dans cette situation, mais dans toute situation où vous exécutez un sélecteur à partir du contexte d'un élément imbriqué.

Code source pour Sizzle

Complet: portée polyfill

Comme avetisk l' a mentionné, Selectors API 2 utilise un :scopepseudo-sélecteur.
Pour que cela fonctionne dans tous les navigateurs (qui prennent en charge querySelector) voici le polyfill

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

Usage

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

Pour des raisons historiques, ma solution précédente

Basé sur toutes les réponses

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

Usage

elem.find('> a');

Si vous connaissez le nom de balise de l'élément que vous recherchez, vous pouvez l'utiliser dans le sélecteur pour obtenir ce que vous voulez.

Par exemple, si vous avez un <select>qui a <option>s et <optgroups>, et que vous ne voulez que les <option>s qui sont ses enfants immédiats, pas ceux à l'intérieur <optgoups>:

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

Ainsi, ayant une référence à l'élément select, vous pouvez - étonnamment - obtenir ses enfants immédiats comme ceci:

selectElement.querySelectorAll('select > option')

Il semble fonctionner dans Chrome, Safari et Firefox, mais n'a pas été testé dans les IE. = /

Si vous voulez finalement trouver des enfants directs (et pas par exemple > div > span), vous pouvez essayer Element.matches () :

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

PRÉTENDRE

Personnellement, je prendrais la réponse de patrick dw, et +1 sa réponse, ma réponse est de chercher une solution alternative. Je ne pense pas que cela mérite un vote défavorable.

Voici ma tentative:

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

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

Cela a fonctionné pour moi:

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

vous devrez passer le @this keywork avant le> lorsque vous voulez rechercher des enfants immédiats.

Ce qui suit est une méthode générique simplifiée pour exécuter une requête de sélecteur CSS uniquement sur des enfants directs - elle tient également compte des requêtes combinées, telles que "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"]');

Il existe une bibliothèque relative à la requête , qui remplace assez facilement le sélecteur de requête . Il polyfills les sélecteurs enfants '> *'et :scope(inc. IE8), ainsi que normalise le :rootsélecteur. En outre , il fournit des pseudos spéciaux relatifs comme :closest, :parent, :prev, :next, juste au cas où.

vérifier si l'élément a un identifiant sinon ajouter un identifiant aléatoire et effectuer une recherche en fonction de celui-ci

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

fera la même chose que

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