以'getelementbyclassname 获取多个类 - Javascript'作主题

在Javascript中，我们可以使用 getElementsByClassName() 方法来获取一个元素中的多个类名。这种方法返回的是一个类数组对象。

语法

document.getElementsByClassName(classname)

• classname：表示一个或多个元素的类名，可以是空格分割的多个类名。

返回值

该方法返回一个类数组对象，包含了所有具有指定类名的元素，如果没有找到任何匹配项，则返回一个空的类数组对象。

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

应用场景

通过获取多个类名，我们可以对多个元素进行批量操作，例如隐藏或者显示一组元素。

const elements = document.getElementsByClassName('test');
for(let i = 0; i < elements.length; i++) {
  elements[i].style.display = 'none';
}

另外，我们还可以利用 getElementsByClassName() 方法与其他HTML DOM方法和属性一起使用，来实现更多复杂的操作，例如动态改变元素的类名。

const elements = document.getElementsByClassName('test');
for(let i = 0; i < elements.length; i++) {
  if(elements[i].classList.contains('active')) {
    elements[i].classList.remove('active');
    elements[i].classList.add('inactive');
  } else {
    elements[i].classList.remove('inactive');
    elements[i].classList.add('active');
  }
}

总之，使用 getElementsByClassName() 方法可以很方便地获取到具有指定类名的元素，并对它们进行批量操作，不论从开发效率角度还是从代码维护角度，都是非常实用的一种方法。