The Document.querySelectorAll() method and the Node.childNodes property both return a NodeList. But the former returns a static NodeList, while the latter returns a live NodeList. This is an important difference to understand, else your code might behave in unexpected ways.
Nowadays, we can convert a NodeList into an array by using the modern Array.from() method. But this requires a polyfill for IE, so I still use the older Array.prototype.slice.call() method sometimes. It’s a lot harder to read, though, so let’s dig into how it works! 🤓
I’ve written a couple of posts recently about event delegation and guard clauses. There are many ways you can check the event.target when using event delegation: by its ID, by its classes, by its tag name, by its attributes, and more. But the easiest way is to use the matches() method.