首頁 > web前端 > js教程 > 主體

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

Patricia Arquette
發布: 2024-10-20 21:12:02
原創
293 人瀏覽過

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中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!