loop through querySelectAll nodelist (Uncaught TypeError: Cannot read properties of undefined)

I know I can use querySelector(“#sub_menuid”); directly., but my plan is to have nested sub menu
and able to loop through them all later.

I’m trying to querySelectAll my ul submenu into an array and do some DOM operations with it later.
After doing

globalThis.allsubmenu_nodelist =  document.querySelectorAll("#"+ submenu.id + " > li > ul");

It does not return an array which is what I’m expecting, it return a nodelist instead.

        console.log("->"+ submenu_list[i].id +"<-");
        console.log("->"+ submenu_list[i].innerHTML +"<-");

I’m using Google chrome. Strangely when I inspect the page
I’m able to see the result in console log and yet the console prompt Uncaught TypeError
for every line I use submenu_list[i].id or .innerHTML

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

when I type the following at console: submenu_list[0].id or submenu_arr[0].id
it can give me the result. But why the console give Uncaught TypeError for every line I use submenu_list[i].id or .innerHTML. When I comment out the console.log(“->”+ submenu_list[i].id +”<-“);
it gave me Uncaught TypeError for the next line with submenu_list[i].id

When I pass submenu_arr[i] to toggleDropdownMenu call
the console.log writeout that the submenu is undefined inside toggleDropdownMenu call,
and can’t use classList
passUncaught TypeError: Cannot read properties of undefined (reading ‘classList’)

Did I convert it successfully in array? why it give me uncaught Type Error?
Can anyone help me with this?

Can anyone point me to an article or sample code where I can go through the node list to get the id & innerHTML without converting it to an array?

I may not know why javascript return querySelectAll in nodelist instead of an array, I think they should have made a simple method to convert it into array and made simpler for javascript users.

I use global for debugging purpose in browser console log

here is my HTML code:

            <ul id="mainmenu" class="nav_menu">
                <li class="nav_item"><a href="#" class="nav_link">Home</a></li>
                <li class="nav_item"><a href="javascript:void(0);" id="newsreview-toggle" class="nav_link submenu-toggle">News & Review</a>
                    <ul id="newsreview" class="sub_menu">
                        <li class="nav_item"><a href="#" class="nav_link">News</a></li>
                        <li class="nav_item"><a href="#" class="nav_link">Review</a></li>
                    </ul>
                </li>
                <li class="nav_item"><a href="javascript:void(0);" id="categories-toggle" class="nav_link submenu-toggle">Categories</a>
                    <ul id="categories" class="sub_menu">
                        <li class="nav_item"><a href="#" class="nav_link">Movies</a></li>
                        <li class="nav_item"><a href="#" class="nav_link">Sports</a></li>
                        <li class="nav_item"><a href="#" class="nav_link">Games</a></li>
                    </ul>
                </li>
            </ul>

here are my javascript code:

function toggleDropdownMenu (submenu){
    console.log("submenu: ->"+ submenu +"<-"); // How come this gives undefined at consol.log
    submenu.classList.toggle('nav--visible'); // console log gives: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

    if (submenu.classList.contains('nav--visible')) {
        console.log("Show Menu");
    } else {
        console.log("Hide Menu");
    }
}

cconst mainmenu = document.querySelector('#mainmenu');

function initMenu (submenu){
    // globalThis.allsubmenu = document.querySelectorAll("#"+ submenu.id + " > li > ul");
    globalThis.alltoggles = document.querySelectorAll("#"+ submenu.id + " > li > a.submenu-toggle"); //querySelectAll will return a nodelist
    globalThis.allsubmenu_nodelist = document.querySelectorAll("#"+ submenu.id + " > li > ul"); //querySelectAll will return a nodelist
    globalThis.submenu_list = [];
    //globalThis.allsubmenu = Array.from(allsubmenu_nodelist).map(elem => {console.log(elem)}); //this line doesn't convert it to array
    globalThis.allsubmenu = Array.from(allsubmenu_nodelist).map(elem => {submenu_list.push(elem)});
    // allsubmenu has array of 2 with undefined value inside, is this correct?

    globalThis.alltoggles_arr = [];
    globalThis.submenu_arr = [];
    for (var i=0; i<= submenu_list.length; i++){
        //console.log("->"+ submenu_list[i].id +"<-");
        //console.log("->"+ submenu_list[i].innerHTML +"<-");
        //submenu_arr[i] = document.querySelector("#"+ allsubmenu_nodelist[i].id);
        alltoggles_arr[i] = document.querySelector("#"+ alltoggles[i].id);
        submenu_arr[i] = document.querySelector("#"+ submenu_list[i].id);
        //console.log("-->"+ submenu_arr[i].id +"<--");
        //console.log("-->"+ submenu_arr[i].innerHTML +"<--");

        alltoggles_arr[i].addEventListener('click', function(e) {
            e.stopPropagation();
            toggleDropdownMenu(submenu_arr[i]);
        });

    }
    console.log(alltoggles_arr); //Did I convert it successfully in array? why it give me uncaught Type Error?
    console.log(submenu_arr); //The console log shows the result, but why  uncaught Type Error for 
}

initMenu(mainmenu);