Why Can't I catch up the 'todo' in switch method? ClassList and Style showing Undefined

Question

So, these are Javascript code.

    const todoFilter = document.querySelector('.filter-todo');
    todoFilter.addEventListener('change', filterTodo);

    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")) {    //here classList is undefined
                    todo.style.display = 'flex';               //here style is undefined
                } else {
                    todo.style.display = 'none';               //here style is undefined
                }
                break;
            case "uncompleted":
                if (todo.classList.contains('uncompleted')) { //here ClassList is undefined
                    todo.style.display = 'none';              //here style is undefined
                } else {
                    todo.style.display = 'flex';              //here style is undefined
                }
        }
    });
}

And Here HTML:

 <form action="">
    <input type="text" class="todo-input">
    <button class="todo-button" type="submit"><i class="fa fa-plus-square" aria-hidden="true">
    </i></button>
    <div class="select">
        <select name="todos" class="filter-todo">
            <option value="all">All</option>
            <option value="completed">Completed</option>
            <option value="uncompleted">Uncompleted</option>
        </select>
    </div>
</form>
<div class="todo-container">
    <div class="todo-list">

    </div>
</div>
<script src="todo.js"></script>

These errors are showing in console:

todo.style is undefined
todo.classList is undefined