querySelector() 只给出一个 class 而不是多个

Question

在我的代码中，我试图将所有以 priceList_ 开头的 classes 放入一个数组中供以后使用。我曾经这样做的代码是：var prefix = document.querySelector('[class^="priceList_"]').className; 这段代码有一个问题，它只给出第一个带有该前缀的 class 而不是给出 classes 的数组。有谁知道这个问题的解决方案吗？

Answer 1

使用querySelectorAll()，得到NodeList。它是可迭代的。

Answer 2

考虑使用 Element.classList 而不是 className。您也可以调用 classList.entries() 来获取迭代器。

您还可以使用 Element.className.split(" ")

从 className 获取数组

classList on MDN Web Docs

Answer 3

您需要使用document.querySelectorAll，document.querySelector目的是找到页面上第一个符合条件的元素。

补充一下

document.querySelectorAll('[class^="priceList_"]').className

会出错，因为返回的对象是节点的 NodeList，而不是单个节点（您可以从中获取类）。

如果您想获得每个元素类的结构化数组，请执行以下操作

const classes = [...document.querySelectorAll('[class^="priceList_"]')].map(elem => elem.className);

这将分配一个类数组（按照页面上 DOM 元素的顺序）。你也可以

const classes = [];

for (const elem of document.querySelectorAll('[class^="priceList_"]')) {

    classes.push(elem.className);
}

console.log('CLASSES', classes);

Answer 4

querySelector() returns第一个结果，如果要多个结果使用querySelectorAll().

querySelector() 只给出一个 class 而不是多个

querySelector() only giving one class instead of multiple

javascript

queryselector