querySelector pesquisa filhos imediatos

Eu tenho alguma função semelhante ao jquery:

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

A questão é como posso fazer o mesmo com querySelector()?

O problema é que o >seletor em querySelector()requer que o pai seja especificado explicitamente. Existe alguma solução alternativa?

Embora não seja uma resposta completa, você deve ficar de olho no W3C Selector API v.2, que já está disponível na maioria dos navegadores, tanto desktop quanto móvel, exceto IE (Edge parece suportar): veja a lista completa de suporte .

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

Você não pode. Não há um seletor que simule seu ponto de partida.

A maneira como o jQuery faz isso (mais por causa de uma forma que qsanão é do seu agrado) é que eles verificam se elemtem um ID e, se não, eles temporariamente adicionam um ID e, em seguida, criam uma string de seletor completa.

Basicamente, você faria:

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

Certamente não é um código jQuery, mas pelo que me lembro, é basicamente o que eles fazem. Não apenas nesta situação, mas em qualquer situação em que você esteja executando um seletor a partir do contexto de um elemento aninhado.

Código fonte para Sizzle

Completo: escopo polyfill

Como avetisk foi mencionado selectores API 2 usos :scopepseudo-selector.
Para fazer isso funcionar em todos os navegadores (que suportam querySelector) aqui está o 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);

Uso

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

Por razões históricas, minha solução anterior

Com base em todas as respostas

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

Uso

elem.find('> a');

Se você souber o nome da tag do elemento que está procurando, poderá usá-lo no seletor para obter o que deseja.

Por exemplo, se você tem um <select>que tem <option>s e <optgroups>, e deseja apenas os <option>s que são seus filhos imediatos, não os internos <optgoups>:

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

Portanto, tendo uma referência ao elemento select, você pode - surpreendentemente - obter seus filhos imediatos assim:

selectElement.querySelectorAll('select > option')

Parece funcionar no Chrome, Safari e Firefox, mas não testou em IEs. = /

Se você quiser eventualmente encontrar filhos diretos (e não por exemplo > div > span), você pode tentar Element.matches () :

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

AFIRMAÇÃO

Pessoalmente, eu pegaria a resposta de patrick dw e +1 sua resposta, minha resposta é para buscar uma solução alternativa. Não acho que mereça um voto negativo.

Aqui está minha tentativa:

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

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

Isso funcionou para mim:

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

você terá que passar o @this keywork antes do> quando quiser pesquisar os filhos imediatos.

O seguinte é um método simplificado e genérico para executar qualquer consulta do seletor CSS apenas em filhos diretos - ele também leva em consideração consultas combinadas, como "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"]');

Existe uma biblioteca relativa à consulta , que é um substituto bastante útil para o seletor de consulta . Ele polyfills seletor de crianças '> *'e :scope(inc. IE8), bem como :rootseletor normaliza . Também fornece algumas pseudos relativos especiais, como :closest, :parent, :prev, :next, apenas no caso.

verifique se o elemento tem id, então adicione um id aleatório e faça uma pesquisa com base nele

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

fará a mesma coisa que

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