为什么我的控制台日志返回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>