如何通过'role'属性选择元素并使用vanilla JS按类过滤？

Question

标记:

<ul>
  <li role="presentation" class="active">
    <a href="#1" aria-controls="1" role="tab">How to Install for iPad</a>
  </li>
  <li role="presentation">
    <a href="#2" aria-controls="2" role="tab">How to Install for Mac</a>
  </li>
  <li role="presentation">
    <a href="#3" aria-controls="3" role="tab">How to Install for PC</a>
  </li>
</ul>

当我使用document.querySelectorAll('[role ="presentation"]'); 结果是数组 [li.active,li,li]

我如何删除.active类并使用普通JS w/o JQuery将其附加到这些li中的任何其他类更简单的方法？

Answer 1

试试这个:

// remove active class from all elements
document.querySelectorAll('[role="presentation"]').forEach(function (el){
el.classList.remove("active");
});

// add class 'active' to last element
document.querySelectorAll('[role="presentation"]:last-of-type')[0].classList.add("active")

笔记:

• 'classList'在IE9中不起作用;
• 我认为您必须根据需要修改添加类行.