在Web前端開發過程中，我們經常需要通過JavaScript獲取頁面上的多個元素。比如，我們需要獲取同樣class名字的一組元素，然后對它們進行操作。

下面我們就來介紹幾種獲取多個元素的方法。

一、通過class獲取多個元素

const targetElements = document.querySelectorAll(".className");

如上代碼所示，通過querySelectorAll方法可以獲取頁面上所有class為className的元素。返回的是一個NodeList節點列表。
更加具體的，例如我們想要獲取所有div標簽中的元素。

const divElements = document.querySelectorAll("div");

二、通過標簽名獲取多個元素

const targetElements = document.getElementsByTagName("tagName");

如上代碼所示，getElementsByTagname方法可以獲取頁面中所有tagName標簽的元素。同樣返回的是一個NodeList節點列表。
例如，獲取頁面上所有的img元素。

const imgElements = document.getElementsByTagName("img");

三、通過name獲取多個元素

const targetElements = document.getElementsByName("nameValue");

如上代碼所示，getElementsByName方法可以獲取頁面中所有name屬性值為nameValue的元素。返回的是一個NodeList節點列表。
下面，我們以獲取頁面上所有name屬性值為fruit的選中的checkbox。

const fruits = document.getElementsByName("fruit");
const chosenFruits = Array.from(fruits).filter(item =>item.checked);

這里我們用到了ES6的Array.from()將NodeList轉為數組，再使用filter()篩選選中的元素。

四、通過自定義屬性獲取多個元素

const targetElements = document.querySelectorAll("[data-custom='customValue']");

如上代碼所示，我們可以通過自定義屬性獲取頁面中所有屬性data-custom值為customValue的元素。同樣的，返回的是一個NodeList節點列表。
例如，獲取頁面上所有自定義屬性為data-active的元素。

const activeElements = document.querySelectorAll("[data-active]");

以上就是獲取多個元素的幾種方法，我們可以結合具體的項目需求選擇不同的方式進行操作。