為什么我的控制台日志返回 HTMLCollection0？

Question

我試圖在列表中返回該文本，但我得到了 htmlcollection0

我的 JS：

 Array.from(document.getElementById("main-menu").getElementsByTagName("li")).forEach(
        (x) =>
          (x.onclick = () =>
            console.log({
              event_name: "menu item clicked",
              menu_item: x.getElementsByTagName("li"),
            }))
      );

我的html：

<div id="main-body">
      <ol id="main-menu">
        <li class="selected">Shop Spirits</li>
        <li>Shop Bourbon</li>
        <li>Shop Scotch</li>
        <li>Shop Rum</li>
      </ol>

Answer 1

x.getElementsByTagName('li')返回嵌套在x中的所有li元素。 沒有，所以返回一個空的 NodeList。

如果要記錄單擊項目的文本，請使用x.innerText ，無需搜索任何內容。

 Array.from(document.getElementById("main-menu").getElementsByTagName("li")).forEach( (x) => (x.onclick = () => console.log({ event_name: "menu item clicked", menu_item: x.innerText })) );

 <div id="main-body"> <ol id="main-menu"> <li class="selected">Shop Spirits</li> <li>Shop Bourbon</li> <li>Shop Scotch</li> <li>Shop Rum</li> </ol>