踩坑JS：获取 document.querySelector.children获取的 HTMLCollection 的正确遍历姿势！

一、获取到 HTMLCollection

 const domlist = document.querySelector(".header-left-Menu-style").children;

这里的 domList 就是 HTMLCollection 对象，是个类数组,不能使用map等方法；最后使用 for 循环完成的遍历；如下所示

二、场景

自己编写后台管理页面，左 上下layout 结构，使用zent组件库。
左侧路由使用 Menu 组件功能不全，只提供了一个初始默认选项，这就导致了一个问题：
一、左侧单独切换路由时，没问题；
二、问题在于——从其他页面换路由时，因为不是受控组件、左侧Menu根本不会切换。
三、好容易获取到了对应的标签数组列表，反正不能使用map等方法遍历，通过查资料发现原来获取的是个类数组HTMLCollection。

Zent-Menu：https://zent-contrib.gitee.io/zent/zh/component/menu

参数	说明	类型
onClick	点击菜单节点回调	func
onSubMenuClick	点击子菜单(非叶子节点)的回调, 入参为子菜单 ID	func
onExpandChange	菜单展开/折叠时的回调, 入参为此时处于展开状态的	func
SubMenu	id 数组	func
style	自定义内联样式	object
mode	模式	string
defaultExpandKeys	默认展开的SubMenu的keys	array
defaultSelectedKey	默认选中的MenuItem的key	string
className	节点类名	string

三、解决办法

思路：页面路由切换，只需要监听一下路由的变化，从而判断当前路由对应左侧Menu的哪个子元素，给对应的子元素做一个点击事件即可。

useEffect(()=>{
   // 监听路由的变化 location.pathname
   // 通过遍历【路由列表routerList】获取到 location.pathname（key) 对应的路由名称
   // 通过获取 Menu 标签子元素（li）的内容--即routerList[item].innerHTML
   // 遍历 MenuNameList, 找到指定的li子元素，添加点击事件；
   const domList = document.querySelector(".header-left-Menu-style").children;
   const locationPathname = location.pathname;
   let activeMenuName = '';
   for(let i = 0;i < routerList.length;i ++){
     if(routerList[i].path === locationPathname){
       activeMenuName = routerList[i].MenuName
     }
   }
   for(let i = 0;i< domList.length;i ++){
     if(domList[i].innerHTML === activeMenuName){
       domList[i].click()
     }
   }
 },[location.pathname])

四、菜鸟教程传送门https://www.runoob.com/jsref/dom-htmlcollection.html