js获取class的所有元素

JS获取class的所有元素的攻略

1. 使用getElementsByClassName方法

通过document.getElementsByClassName方法可以获取指定class的所有元素。

const elements = document.getElementsByClassName('className');

其中，className是所要获取元素的class名称。

此方法返回一个类似于数组的HTMLCollection对象，包含了所有拥有该class的元素。我们可以通过遍历HTMLCollection对象来访问这些元素。

示例1：获取class为"myClass"的所有元素并操作。

<div class="myClass">第一个</div>
<div class="myClass">第二个</div>
<div class="otherClass">其他元素</div>

const elements = document.getElementsByClassName('myClass');
elements[0].innerHTML = '修改第一个元素内容';

2. 使用querySelectorAll方法

另一种常用的方法是使用querySelectorAll，可以通过CSS选择器来选择元素。

const elements = document.querySelectorAll('.className');

其中，.className是所要获取元素的class名称。

该方法也会返回一个类似于数组的NodeList对象，其中包含了所有满足选择器的元素。

示例2：获取所有class为"myClass"的<p>元素并修改背景颜色。

<p class="myClass">第一个P元素</p>
<p class="myClass">第二个P元素</p>
<p>其他元素</p>

const elements = document.querySelectorAll('p.myClass');
elements.forEach(element => {
  element.style.backgroundColor = 'yellow';
});

这两种方法都可以用来获取class的所有元素，你可以根据实际需求选择使用哪种方法。