Javascript 如何检查元素类子类是否具有特定的类

我以前读过一些关于这个的主题，但这是我第一次尝试应用它，但是我对如何检查某个元素是否有类子元素并向其中添加一些新类感到非常困惑

假设我想在单击

li

元素子元素后，将其添加到

active

类。这是我想一步一步做的：

单击

li

元素后，检查该元素中是否有活动类

如果没有，则添加

active

类，如果已存在

类，则返回
或不执行任何操作

我读了这个主题，但我对如何登记孩子感到困惑

对于第2个我已经为它创建了函数，但是我很困惑我必须把它放在我的代码中的什么地方

这是我的html：

<li id="test" class="additional-menu"><a href="#">Link1</a>
  <ul>
    <li class="active"><a href="#" id="">Home</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</li>

这是我检查孩子的js：

// This is for check a normal class but I doesn't know how to check a child class element from this

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

var el = document.getElementById('test');

alert(hasClass(el, 'active'));


// I can use this function if it inside button using onClick
// But I got quite confused of how to use it without button

function addClass () {
    var x = document.getElementsById("test")[0]; 
    x.className += ' active';
}

有人能帮我理解这一点吗？根据你的想象，我想用这个制作一个导航条，当我移动到另一个路线时，这个类仍然在那里，比如说如果我在

家

我想让这个类留在

家

如果我在

职业

我想让这个类留在那里。我觉得我已经在那里解决了它，但仍然没有运气

• 首先将click listener附加到所有click的直接父级 元素
• 然后通过循环所有子元素来删除“active”类
• 最后，将活动类添加到在单击事件本身中收到的目标

document.addEventListener（'DOMContentLoaded'，（）=>{
//附加到父级的事件，用于在冒泡时单击所有子级
document.querySelector（“.parent”）.addEventListener（“单击”，“事件）=>{
event.preventDefault（）；//防止默认的“a”标记重定向
让target=event.target；
如果（target.tagName！=“A”）{
return；//仅确保

哇，谢谢你，它很管用，但是你能解释一下它是从哪里来的

点击
添加列表（“点击”
，
标记名与
类名
相同吗？关于点击，它可以来自
这样我们就可以同时满足所有的需求。而tagName只给你一个元素的HTML标记
// This is for check a normal class but I doesn't know how to check a child class element from this

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

var el = document.getElementById('test');

alert(hasClass(el, 'active'));


// I can use this function if it inside button using onClick
// But I got quite confused of how to use it without button

function addClass () {
    var x = document.getElementsById("test")[0]; 
    x.className += ' active';
}