是否可以在元素數組上使用querySelectorAll？

說我有基於任何selector是否可以在元素數組上使用querySelectorAll？

var elems = document.querySelectorAll(selector);

我不知道什麼是包含在elems，但是讓我們假設elems.length > 0

我想使用querySelectorAll（或DOM元素的數組一些等價函數）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);

來源

2014-02-18 naomik

你要問這樣的相似： [DEMO]（http://jsfiddle.net/ashish41191/RanWJ/） –

可以使用Element#matches方法來過濾掉你原來的列表：

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

請注意，您可以在其中找到此方法的各種名稱，您可能想要在它們周圍封裝一個函數。（請檢查文檔！）

另一種可能性是獲得由document.querySelectorAll與兩個選擇器返回的兩組元素的交集。有兩種交集的各種實現，隨意使用一個你喜歡的。 This question提供了一些想法。

來源

2014-02-18 18:08:03 Tibos

非常感謝這一點。我在原來的問題中添加了包裝器。讓我知道，如果這看起來對你好^^ – naomik

@naomik看起來不錯 – Tibos

這就是你要找的如果我會找到你correct !!

SEE WORKING DEMO

來源

2014-02-18 18:15:46

這不會做他想做的事。這查找匹配查詢的子元素，他希望數組中與查詢匹配的元素。 –

這是我需要長達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; 
    }, []); 
}

來源

2014-05-25 22:07:52

querySelectorAll返回一個節點列表的結構，所以我們改變爲一個數組列表，我們可以使用功能圖譜。

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

來源

2017-05-07 22:56:20 davin

是否可以在元素數組上使用querySelectorAll？

回答

相關問題