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

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

• javascript
• dom
• selectors-api

• Are you asking similar like this : DEMO – Ash Commented Feb 18, 2014 at 18:12

4 Answers 4

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.

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

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;
    }, []);
}

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

SEE WORKING DEMO