JavaScript:在 classList 中添加一个特定于类的标签

Question

我有一个名为 X 的类其中有多个 <span>在里面，我还有一个 css 选择器 X span .

在 JavaScript 中我如何使用 X span而不是 X在以下情况下:

document.querySelector('.ABC').classList.add(X)

我试过了 document.querySelector('.ABC').classList.add(X span)这肯定是行不通的。

Answer 1

在 Javascript 中，使用 HTML 是这样的:

• 你要求浏览器给你一个对应于 HTML 元素的对象或对象列表
• 您使用对象修改页面

如果我没理解错的话，你要做的是:

• 按类名“.ABC”查找元素
• 在该元素内找到“span”-s
• 给这些跨度一个类

要做到这些，请按照以下步骤操作:

// get the first element that matches .ABC
let parent = document.querySelector(".ABC");
// now parent is either an Element, or undefined/null

// if it's not null, we can call querySelectorAll
// get all elements inside the parent that are spans
let spans = parent.querySelectorAll("span");
// spans is now either an array of Elements, or undefined/null
// if it's not null, we can iterate over it
for (let span of spans) {
    span.classList.add('X');
}