Usando querySelectorAll para recuperar hijos directos

Puedo hacer esto:

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

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

Es decir, puedo recuperar con éxito todos los hijos directos del myDivelemento que tienen clase .foo.

El problema es que me molesta que deba incluir el #myDiven el selector, porque estoy ejecutando la consulta en el myDivelemento (por lo que obviamente es redundante).

Debería poder dejar la opción #myDivdesactivada, pero entonces el selector no es una sintaxis legal ya que comienza con >.

¿Alguien sabe cómo escribir un selector que obtenga solo los hijos directos del elemento en el que se está ejecutando el selector?

Buena pregunta. En el momento en que se solicitó, no existía una forma implementada universalmente para realizar "consultas con raíz de combinador" (como las llamó John Resig ).

Ahora se ha introducido la pseudoclase: scope . No es compatible con las versiones [anteriores a Chrominum] de Edge o IE, pero Safari ya lo ha admitido durante algunos años. Usando eso, su código podría convertirse en:

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

Tenga en cuenta que, en algunos casos, también puede omitir .querySelectorAlly utilizar otras características de la API DOM antiguas. Por ejemplo, en lugar de myDiv.querySelectorAll(":scope > *")simplemente escribir myDiv.children, por ejemplo.

De lo contrario, si aún no puede confiar :scope, no puedo pensar en otra forma de manejar su situación sin agregar más lógica de filtro personalizada (por ejemplo, encontrar de myDiv.getElementsByClassName("foo")quién .parentNode === myDiv), y obviamente no es ideal si está tratando de admitir una ruta de código que realmente ¡solo quiere tomar una cadena de selección arbitraria como entrada y una lista de coincidencias como salida! Pero si, como yo, terminaste haciendo esta pregunta simplemente porque te quedaste atascado pensando "todo lo que tenías fue un martillo", no olvides que hay una variedad de otras herramientas que DOM también ofrece.

¿Alguien sabe cómo escribir un selector que obtenga solo los hijos directos del elemento en el que se está ejecutando el selector?

La forma correcta de escribir un selector que está "arraigado" al elemento actual es usar :scope.

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

Sin embargo, la compatibilidad con el navegador es limitada y necesitará una cuña si desea utilizarla. Construí scopedQuerySelectorShim para este propósito.

Aquí hay un método flexible, escrito en vanilla JS, que le permite ejecutar una consulta de selector de CSS solo sobre los hijos directos de un elemento:

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

si sabe con certeza que el elemento es único (como su caso con el ID):

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

Para una solución más "global": (use un ajuste de MatchSelector )

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

donde elmestá su elemento padre y seles su selector. También se podría utilizar totalmente como prototipo.

La siguiente solución es diferente a las propuestas hasta ahora y me funciona.

La razón es que primero selecciona todos los hijos coincidentes y luego filtra los que no son hijos directos. Un hijo es un hijo directo si no tiene un padre que coincida con el mismo selector.

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!

Creé una función para manejar esta situación, pensé en compartirla.

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

En esencia, lo que está haciendo es generar una cadena aleatoria (la función randomString aquí es un módulo npm importado, pero puede crear el suyo) y luego usar esa cadena aleatoria para garantizar que obtiene el elemento que espera en el selector. Entonces eres libre de usar el >después de eso.

La razón por la que no estoy usando el atributo id es que es posible que el atributo id ya esté en uso y no quiero anularlo.

Bueno, podemos obtener fácilmente todos los hijos directos de un elemento usando childNodesy podemos seleccionar ancestros con una clase específica con querySelectorAll, por lo que no es difícil imaginar que podríamos crear una nueva función que obtenga ambos y los compare.

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

Nota: Esto devolverá una matriz de nodos, no una NodeList.

Uso

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

Me gustaría agregar que puede extender la compatibilidad de : scope simplemente asignando un atributo temporal al nodo actual.

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

Me hubiera ido con

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

Estoy haciendo esto sin siquiera intentarlo. ¿Funcionaría esto?

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

Pruébelo, tal vez funcione, tal vez no. Disculpas, pero ahora no estoy en una computadora para probarlo (respondiendo desde mi iPhone).