Можно ли использовать querySelectorAll для массива элементов?

Question

Скажем, у меня есть массив элементов DOM, основанный на любойselector

var elems = document.querySelectorAll(selector); 

Я понятия не имею, что включено в elems, но давайте предположим, что elems.length > 0

Я хотел бы использовать querySelectorAll (или некоторая эквивалентная функция) на elems, чтобы найти все элементы, соответствующие дополнительному селектору.

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

Это не работает (по понятным причинам), но я не уверен в том, как это сделать иначе :(

---

Вот обертка я создал для работы с принятым от ответа @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); 

Answer 1

Вы можете использовать метод Element#matches, чтобы отфильтровать ваш первоначальный список:

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

Обратите внимание, что существуют различные имена, под которыми вы найдете этот метод, вы можете обернуть вокруг них функцию. (Пожалуйста, проверьте документацию!)

Другая возможность - получить пересечение двух наборов элементов, возвращаемых document.querySelectorAll с двумя селекторами. Существуют различные реализации пересечения двух наборов, не стесняйтесь использовать тот, который вам по душе. This question содержит некоторые идеи.

Answer 2

вот что вы ищете Если я получу вас correct !!

SEE WORKING DEMO

Answer 3

Вот мой взять, пока matches не больше стандартного.

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

Answer 4

querySelectorAll возвращает структуру NodeList, поэтому мы изменяем для списка массива, и мы можем использовать функцию карты.

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