Have you ever written the following code?
const paragraphsToHide = document.getElementsByClassName("p.hide");
paragraphsToHide.forEach(para => para.hidden = true);
// error = paragraphsToHide.forEach is not a function!!!The reason for your bug is that you have received a HTMLCollection iteratable object and not an array from your DOM Selection method!!
What is an HTMLCollection?
An HTMLCollection is a grouping of HTML Elements, commonly used in manipulating groups of elements on a page.
Maybe you’re trying to loop through a list of paragraphs on the page, maybe trying to consolidate form inputs or hide all non-selected navigation elements. There are many cases where you might want to perform this type of iteration.
The reason that I use the term “grouping” instead of “array” is because although the HTMLCollection is an “iteratable object”, it is not actually an array.
How do I use an HTMLcollection?
There are a couple ways to use the HTMLCollection.
The best approach is to … not use it at all.
Wait for it… If you stick to the the now outdated document.getElementsByClassName and document.getElementById methods you will receive an…
