// Select all <div> elements with the class "container"
const containers = collectHTML('div.container');

// or you can:
// containers = new HTMLNodeCollection(document.querySelectorAll('div.container'));

// Access properties and methods of the HTMLNodeCollection instance
console.log(containers.length); // Output: Number of selected elements
console.log(containers.first()); // Output: First selected element
console.log(containers.last()); // Output: Last selected element

// Iterate over the collection using a for...of loop
for (const element of containers) {
  console.log(element); // Output: Each selected element
}

// Use other available methods like forEach, map, filter, etc.
containers.forEach(function(element) {
  // Do something with each element
});

const ids = containers.map(function(element) {
  return element.id;
});

console.log(ids); // Output: Array of element IDs

// Perform more specific selections using querySelector and querySelectorAll
// It will return a new HTMLNodeCollection instance
const sidebar = containers.querySelector('.sidebar');
const forms = containers.querySelectorAll('.formset');

// Check if the collection is empty
console.log(containers.isEmpty()); // Output: Boolean indicating if the collection is empty