首頁  >  文章  >  web前端  >  如何使用 document.querySelectorAll 正確循環選定的元素?

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

Patricia Arquette
Patricia Arquette原創
2024-10-20 21:12:02298瀏覽

How to Properly Loop Through Selected Elements Using document.querySelectorAll?

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

在 Web 開發中,循環選定的元素通常是必要的。 document.querySelectorAll 提供了一個表示所選元素的類似陣列的物件。但是,如果直接在 NodeList 上執行迭代,可能會出現問題,導致輸出中出現其他項目。

要正確循環選取的元素,請使用擴充語法將 NodeList 轉換為陣列。透過迭代結果數組,您可以避免額外的項目。此方法非常適合支援 ES2015 和 Babel.js 的現代 JavaScript 環境。

例如,如果您想使用document.querySelectorAll('.check') 循環遍歷複選框:

<code class="javascript">var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

checkboxesArray.forEach(checkbox => {
  console.log(checkbox);
});</code>

此程式碼片段將僅正確迭代複選框元素,而無需任何額外的項目。

以上是如何使用 document.querySelectorAll 正確循環選定的元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn