how to filter htmlcollection code example

Example 1: create array from htmlcollection

//Use the Array.from() method to convert a nodelist or HTMLcollection into an array.

let elements = document.getElementsByClassName("classnameHere");
let arrayOfElements = Array.from(elements);

//Now arrayOfElements is iterable with methods such as .forEach().

Example 2: filter htmlcollection

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)
}

Example 3: filter htmlcollection

const chapters = document.querySelectorAll(".chapter-list-item:not(.active)");

console.log("Found elements:")
for (const chapter of chapters) {
  console.log(chapter.textContent, chapter.className)
}