如果有这个类的元素，如何在正文中查找

How to find in the body, if there are elements of this class

本文关键字：正文 查找 元素 如果      更新时间：2023-09-26

我正在用纯javascript编写代码，如何查找我的a（ul>li>a）上是否有class="active"。

<ul class="tabs">
    <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-0">Item0</a></li>
    <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-1">Item1</a></li>
    <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-2">Item2</a></li>
    <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-3">Item3</a></li>
</ul>

我的js

document.getElementsByClassName('active')

编辑：

var elements = document.getElementsByClassName("tabs")[0].getElementsByClassName("active") // like this
var elements = document.querySelectorAll('ul li a.active') // or like this @Jhuliano Moreno 
for (let i = 0; i < elements.length; ++i) {
  elements[i].classList.remove("active")
}
// Inefficiant on-liner:
Array.prototype.slice.call(document.querySelectorAll('ul li a.active'),0).forEach(function(el){el.classList.remove("active")})
.active {
    color: red;
}
<ul class="tabs">
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-0">Item0</a></li>
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-1">Item1</a></li>
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-2">Item2</a></li>
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-3 active">Item3</a></li>
</ul>

旧：

if (document.getElementsByClassName('active').length > 0) {
    // Yes there are
  } else {
    // No there are not
  }
<ul class="tabs">
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-0">Item0</a></li>
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-1">Item1</a></li>
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-2">Item2</a></li>
  <li class="tabs-content"><a href="#" onclick="activatetb(this)" class="item-3 active">Item3</a></li>
</ul>

相关文章：