如何使用document.querySelectorAll循環選定的元素

我想循環選擇與document.querySelectorAll查詢的元素，但是如何？如何使用document.querySelectorAll循環選定的元素

例如筆者使用的：

var checkboxes = document.querySelectorAll('.check'); 
for(i in checkboxes) { 
    console.log(checkboxes[i]); 
}

輸出：

<input id="check-1" class="check" type="checkbox" name="check"> 
<input id="check-2" class="check" type="checkbox" name="check"> 
<input id="check-3" class="check" type="checkbox" name="check"> 
<input id="check-4" class="check" type="checkbox" name="check"> 
<input id="check-5" class="check" type="checkbox" name="check"> 
<input id="check-6" class="check" type="checkbox" name="check"> 
<input id="check-7" class="check" type="checkbox" name="check"> 
<input id="check-8" class="check" type="checkbox" name="check"> 
<input id="check-9" class="check" type="checkbox" name="check"> 
<input id="check-10" class="check" type="checkbox" name="check" checked=""> 

10 
item() 
namedItem()

我的問題是，在最後這個方法返回3個額外的物品。我該如何正確地做到這一點？

來源

2012-09-08 Hadi Mostafapour

嗨！我不確定我是否理解你的問題......你可以發佈你的HTML代碼，並且你的結果更清楚嗎？ – Littm

這篇文章應該很好地解釋它：http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/ – wwaawaw

for in循環不建議用於數組和類似數組的對象 - 你明白爲什麼。可以有不僅僅是數字索引的項目，例如length財產或一些方法，但for in將遍歷所有這些項目。二者必選其一

for (var i = 0, len = checkboxes.length; i < len; i++) { 
    //work with checkboxes[i] 
}

或

for (var i = 0, element; element = checkboxes[i]; i++) { 
    //work with element 
}

第二條路也不能使用，如果在數組中一些元素可以是falsy（不是你的情況下），但可以更具可讀性，因爲你並不需要在任何地方使用[]表示法。

來源

2012-09-08 12:04:00 duri

一個不錯的選擇是：

[].forEach.call(
    document.querySelectorAll('.check'), 
    function (el) { 
     console.log(el); 
    } 
);

但正如指出的那樣，你應該使用一個for循環。

來源

2013-12-24 11:11:49

開銷不僅僅是使用for循環不幸的是，這是一個很好的解決方案。 – MarkLunney

這個方法有趣的帖子：http://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/ – twe4ked

如果採取這種方法，最好在執行'querySelectorAll'之前傳遞結果到'forEach'循環（例如'var elements = document.querySelectorAll（'.check'）; [] .forEach.call（elements，...）;'）。否則，你最終會在循環的每次迭代中不必要地重複做同樣的DOM查詢。 –

我最喜歡的是使用spread operator將其轉換爲數組，然後使用forEach進行循環。在ES2015

var div_list = document.querySelectorAll('div'); // returns NodeList 
var div_array = [...div_list]; // converts NodeList to Array 
div_array.forEach(div => { 

// do something awesome with each div 

});

我的代碼並使用Babel.js所以不應該有一個瀏覽器支持的問題。

來源

2015-11-29 11:07:31 Thoran

這是一個現代的答案。 –

隨着ES6，有一個靜態方法Array.from採取的Array非靜態方法（的forEach，地圖，過濾器，..）的優點：

Array.from(document.querySelectorAll('div')).forEach((element,index) => 
{ 

    // handle "element" 

});

另一個，使用Array.from因爲querySelector提供item方法：

var all=document.querySelectorAll('div'); 
// create range [0,1,2,....,all.length-1] 
Array.from({length:all.length},(v,k)=>k).forEach((index)=>{ 
    let element=all.item(index); 
});

來源

2016-09-07 18:31:37

它看起來像火狐50 +，51 +的Chrome和Safari 10+現在都支持.forEach功能爲NodeList對象。注 - .forEach在Internet Explorer中不受支持，因此如果需要IE支持，請考慮以上方法之一。

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p'); 
 
paragraphs.forEach(p => console.log(p));

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p> 
 
<p>paragraph 4</p> 
 
<p>paragraph 5</p>

來源

2017-02-27 19:26:53 aboutaaron

ES6 const checkboxes = Array.from(document.querySelectorAll('.check'));

來源

2018-03-06 14:34:01

如何使用document.querySelectorAll循環選定的元素

回答

相關問題