在Web前端開發(fā)過程中，我們經(jīng)常需要通過JavaScript獲取頁(yè)面上的多個(gè)元素。比如，我們需要獲取同樣class名字的一組元素，然后對(duì)它們進(jìn)行操作。

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

一、通過class獲取多個(gè)元素

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

如上代碼所示，通過querySelectorAll方法可以獲取頁(yè)面上所有class為className的元素。返回的是一個(gè)NodeList節(jié)點(diǎn)列表。
更加具體的，例如我們想要獲取所有div標(biāo)簽中的元素。

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

二、通過標(biāo)簽名獲取多個(gè)元素

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

如上代碼所示，getElementsByTagname方法可以獲取頁(yè)面中所有tagName標(biāo)簽的元素。同樣返回的是一個(gè)NodeList節(jié)點(diǎn)列表。
例如，獲取頁(yè)面上所有的img元素。

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

三、通過name獲取多個(gè)元素

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

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

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

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

四、通過自定義屬性獲取多個(gè)元素

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

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

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

以上就是獲取多個(gè)元素的幾種方法，我們可以結(jié)合具體的項(xiàng)目需求選擇不同的方式進(jìn)行操作。