javascript - 将类更改应用于所有 getElementsByTagName - 纯 JavaScript

Question

我只想使用 JavaScript，而不是 jQuery。

我有 2 个问题，首先我想正确地将类属性应用于 ul 中的每个 li 元素

理想情况下，当一个 li 元素设置了类时，其余元素不设置类属性(如果设置则删除)——但是根据我的测试，当我需要从元素中取消设置/删除类时我只能将类设置为 class=""，它可以工作但并不理想。

我已经能够使用 getElementsByTagName 获取 ul 的子元素 ID

<ul id="u">
    <li id='car' class="t">1</li>
    <li id='blue'>2</li>
    <li id='eight'>3</li>
    <li id='nasa'>4</li>
</ul>

var u = document.getElementById('u');
var li = u.getElementsByTagName('li');

我的第二个问题是在 li 上循环似乎给我带来了很多过多的垃圾。

for (var i in li) {
  alert(li[i]["id"]);
}
//returns
car
blue
eight
nasa
undefined
undefined
undefined

执行此操作的最佳方法是什么？

Answer 1

因为这是您迭代对象而不是数组的方式。

标准的 for 循环将只返回你期望的结果:

for (var i = 0; i < li.length; i++) {
    alert(li[i]["id"]);
}

---

要从中删除所有类，请在循环内使用:

li[i].className = "";

---

只删除一个特定的类:

li[i].classList.remove("classNameHere");

---

如果你想删除整个元素属性(不仅仅是重置类)，使用:

li[i].removeAttribute("class");

请在此处查看所有三个示例:http://jsfiddle.net/vr9mm2vk/1/