Example:
HTMLCollection []
0: div.chapter-list-item.seen
1: div.chapter-list-item.seen
2: div.chapter-list-item.seen
3: div.chapter-list-item.seen
4: div.chapter-list-item.active.seen
5: div.chapter-list-item.seen
6: div.chapter-list-item.seen
7: div.chapter-list-item.seen
8: div.chapter-list-item.
solution:
1、directly query to get the items you want using the :not() selector to prevent matching items you don't want
const chapters = document.querySelectorAll(".chapter-list-item:not(.active)");
console.log("Found elements:")
for (const chapter of chapters) {
console.log(chapter.textContent, chapter.className)
}
2、use Array.from(convert to Array ), Array.filter
const existingElements = document.querySelectorAll(".chapter-list-item");
const chapters = Array.from(existingElements)
.filter(chapter => !chapter.classList.contains("active"))
console.log("Found elements:")
for (const chapter of chapters) {
console.log(chapter.textContent, chapter.className)
}
expand:
classList Properties and Methods
Name | Description |
---|---|
add() | Adds one or more tokens to the list |
contains() | Returns true if the list contains a class |
entries() | Returns an Iterator with key/value pairs from the list |
forEach() | Executes a callback function for each token in the list |
item() | Returns the token at a specified index |
keys() | Returns an Iterator with the keys in the list |
length | Returns the number of tokens in the list |
remove() | Removes one or more tokens from the list |
replace() | Replaces a token in the list |
supports() | Returns true if a token is one of an attribute's supported tokens |
toggle() | Toggles between tokens in the list |
value | Returns the token list as a string |
values() | Returns an Iterator with the values in the list |