javascript 获取多个元素

在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]");
    

以上就是获取多个元素的几种方法，我们可以结合具体的项目需求选择不同的方式进行操作。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！