Question

我一直在想我们为什么不能在javascript中这样做。

document.getElementsByClassName('class1').getElementsByClassName('class2')

这不起作用，因为第一个getElementsByClassName调用会给我们一个HTMLCollection，它没有定义getElementsByClassName。为什么是这样？这将是一个很好的功能，以这种方式使用，因为它会让你获得基于它们的元素有多个不同的类，而不只是一个。

有没有办法：

在HTMLCollection中按类名获取元素
按多个班级名称获取元素

Answer 1

：）

在HTMLCollection中按类名获取元素：

HTMLCollection.prototype.forEach = Array.prototype.forEach;

HTMLCollection.prototype.getElementsByClassName = function( name ){
    var all = [];
    this.forEach( function( el ){
         if( el )
             all.concat( el.getElementsByClassName( name ) );
    });
    return all;
}

通过多个类名获取元素：

document.querySelectorAll('.class1.class2');

请使用第二个以获得更好的性能。

Answer 2

获取多个班级名称：

document.querySelector('.someclass.otherclass'); // get first element that matches
document.querySelectorAll('.someclass.otherclass'); //get all elements that match

您可以querySelector*任何DOM元素，而不仅仅是document，以便在其中进行搜索。

在HTMLCollection中按类名获取

[].filter.call(
    htmlCollection, element => [].includes.call(elements.classList, 'someclassname')
)

HTMLCollection和.classList都不是数组，只是类似数组的对象，因此需要.call。

如何在HTMLCollection上按类名获取元素

2 个答案: