querySelectorAll wählen Kinder, aber nicht Enkelkinder Vanilla JavaScript

Question

Dies kann wie ein Duplikat zu Selecting <li> child node but not grandchildren with vanilla JavaScript und Selecting children elements but NOT grandchildren scheinen, aber es ist ein gutes Stück anders.

---

Ich habe ein Element in js:

var element = document.getElementBySomething(...); 

Das Element viele Kinder mit Klasse layer, Kinder, einige von ihnen, und einige von ihnen Enkelkinder.

Dieses Element in eine Funktion zur weiteren Verwendung übergeben wird ...

In dieser Funktion, wie würden Sie nur die Kinder bekommen (nicht Enkelkinder) des Elements folgend mit querySelectorAll

Ich habe versucht, :

Dies funktioniert jedoch nicht, da es kein gültiger CSS-Selektor ist.

Ich weiß, dass es möglich ist, etwas wie zu tun: querySelectorAll("#my_id > .layer"), aber ich habe bereits ein Element in eine Funktion übergeben, die keine ID, Klasse, etc. haben kann, dass ich es leicht mit identifizieren kann.

Wie würde ich das machen?

Etwas wie: document.querySelectorAll(element + " > .layer")

Danke für die Hilfe!

Answer 1

Sie können die untergeordneten Elemente des Elements filtern. Working demo.

// matchSelector 
var matches = (function(p){ 
    return p.matches 
     || p.webkitMatchesSelector 
     || p.mozMatchesSelector 
     || p.msMatchesSelector 
}(Element.prototype)) 

var layers = [].filter.call(element.children, function(el) { 
    return matches.call(el, '.layer') 
});