Erreur de type non interceptée : impossible de lire les propriétés de undefined (lecture "contient")

J'essaie de créer une simple application de liste de tâches dans le cadre d'un didacticiel en ligne de DevEd, mais je suis bloqué sur une erreur apparemment déroutante.

Utilisation du balisage HTML suivant :

<div class="todo-container">
 <ul class="todo-list"></ul>
</div>

.. parallèlement à du javascript pour créer et insérer des éléments de liste, j'utilise ensuite la fonction suivante pour filtrer les entrées de la liste de tâches qui ont une balise de classe spécifique.

function filterTodo(e) {
 const todos = todoList.childNodes;
 todos.forEach(function (todo) {
 switch (e.target.value) {
 case "all":
 todo.style.display = "flex";
 break;
 case "completed":
 if (todo.classList.contains("completed")) {
 todo.style.display = "flex";
 } else {
 todo.style.display = "none";
 }
 break;
 }
 });
}

Tout ce qui précède semble bien fonctionner ensemble, jusqu'à ce que j'ajoute N'IMPORTE QUOI, même une ligne de commentaire entre les <ul></ul>balises comme ci-dessous :

<div class="todo-container">
 <ul class="todo-list">
 <!-- boo -->
 </ul>
</div>

En faisant cela, j'obtiens l'erreur suivante lorsque j'essaie de filtrer les entrées :

Uncaught TypeError: Cannot read properties of undefined (reading 'contains')

Quelqu'un peut-il expliquer s'il vous plaît?

Code complet trouvé ici :
https://github.com/developedbyed/vanilla-todo
(pas mon référentiel)

Solution du problème

childNodesrenvoie une collection de - pour ainsi dire - nœuds enfants. Certains de ces nœuds peuvent ne pas être des éléments, mais les nœuds de texte - et les nœuds de texte n'ont aucune classListpropriété. Par example:

const childNodes = document.querySelector('.container').childNodes;
console.log(childNodes[0].classList);
console.log(childNodes[1].classList);

<div class="container">text node<span>element</span></div>