如何在 Javascript 中获取 foreach 元素的类名？

Question

const dropdownmenu = document.querySelector(".dropdownmenu")

dropdownmenu.forEach(element => {
    
    console.log(element.classname)
    
});

问题是如何在 Javascript 中获取 foreach 元素的类名？

Answer 1

两个问题：

1. document.querySelector 仅选择一个元素 - 与指定选择器匹配的第一个元素。您应该使用 document.querySelectorAll 来获取元素数组。
2. .classname 应该是驼峰式 -> .className

我假设您正在尝试获取下拉菜单内的元素。您可以这样做：

<ul class="dropdown-menu">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
</ul>

<script>
    const menu = document.querySelector('.dropdown-menu')

    for (const elem of menu.querySelectorAll('.item')) {
        console.log(elem.className);
    }
</script>

如果您尝试侦听下拉菜单上所有项目的事件，请尝试将事件侦听器放在父级上，并使用 e.target 来定位单击的子级。

<p>Click the items</p>
<ul class="dropdown-menu">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
</ul>

<script>
    const menu = document.querySelector('.dropdown-menu');

    menu.addEventListener('click', (e) => {
        console.log(e.target.textContent);
    });
</script>