javascript - 如何在 HTMLCollection 上通过类名获取元素

Question

这个问题已经有答案了:

奥 git _a (7 个回答)

已关闭 5 年前。

我一直在思考为什么我们不能在 javascript 中做到这一点。

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

这不起作用，因为第一个 getElementsByClassName 调用将为我们提供一个 HTMLCollection，而该 HTMLCollection 上没有定义 getElementsByClassName。为什么是这样？以这种方式使用这将是一个很棒的函数，因为它可以让您根据具有多个不同类的元素获取元素，而不仅仅是一个。

有没有办法:

1. 通过 HTMLCollection 中的类名获取元素
2. 通过多个类名获取元素

Answer 1

通过多个类名获取:

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。