Is it possible to use querySelectorAll on an array of elements?

Question

Say I have an array of DOM elements based on any selector

var elems = document.querySelectorAll(selector);

I have no idea what's included in elems, but let's assume that elems.length > 0

I'd like to use querySelectorAll (or some equivalent function) on elems to find all elements that match an additional selector.

// example: find all buttons with class `foo` within `elems` array
var buttons = elems.querySelectorAll("button.foo");

This doesn't work (for obvious reasons), but I'm unsure of how to do it otherwise :(

---

Here's the wrapper I created to work with the accepted answer from @Tibos

// Element.matches wrapper
(function(e){
  if (typeof e.matches !== "function") {
    e.matches = e.webkitMatchesSelector ||
                e.mozMatchesSelector    ||
                e.msMatchesSelector     ||
                e.oMatchesSelector      ||
                e.matchesSelector;
  }
})(Element.prototype);

Burrussburry

Are you asking similar like this : DEMO – Christmann

Answer 1

You can use the Element#matches method to filter out your original list:

var elems = document.querySelectorAll(selector);
var buttons = Array.prototype.filter.call(elems, function(elem){ 
  return elem.matches('button');
});

Note that there are various names under which you find this method, you might want to wrap a function around them. (Please check the documentation!)

Another possibility is to get the intersection of the two sets of elements returned by document.querySelectorAll with the two selectors. There are various implementations of the intersection of two sets, feel free to use one that is to your liking. This question provides some ideas.

Navigator

Thanks so much for this. I added the wrapper in my original question. Let me know if that looks okay to you ^.^ – Burrussburry

Answer 2

querySelectorAll returns a NodeList structure, so we change for an array list and we can use the function map.

  var lines = Array.prototype.slice.call(document.querySelectorAll(selector));
  var paths = lines.map(function(elem){ 
    return elem.querySelector('button');
  });

Vallonia

Answer 3

Here is my take as long as matches isn't more standard.

function getElementsFromParents(parentSelector, childSelector) {
    var elems = document.body.querySelectorAll(parentSelector);
    return Array.prototype.reduce.call(elems, function matcher(arr, el) {
        var matches = el.querySelectorAll(childSelector);
        if (matches.length) Array.prototype.forEach.call(matches, function pusher(item) {
            arr.push(item);
        });
        return arr;
    }, []);
}

Englebert

Answer 4

Here Is that You are Looking for If i'll get you correct !!

SEE WORKING DEMO

Christmann

This doesn't do what he wants. This finds subelements that match the query, where he wants elements of the array that match the query. – Catheycathi