如何用JavaScript为Section元素添加递增编号的类名？

要给所有<section>元素添加带递增数字的类名，你需要先选中所有目标元素，再逐个遍历处理：

1. 用document.querySelectorAll('section')获取页面上所有的section元素，这个方法会返回包含所有匹配元素的NodeList集合。
2. 遍历该集合，给每个元素添加类名，类名中的数字根据元素的索引+1生成（因为集合索引从0开始）。

示例代码：

// 获取所有section元素
const sections = document.querySelectorAll('section');

// 遍历每个section并添加递增类名
sections.forEach((section, index) => {
  section.classList.add(`thisclass${index + 1}`);
});

代码说明 #

• querySelectorAll('section')：区别于只会匹配第一个元素的querySelector，它能抓取页面中所有符合条件的section元素。
• forEach()：遍历集合时，第二个参数index代表当前元素在集合中的位置，加1后就能让类名数字从1开始递增（第一个section对应thisclass1，第二个对应thisclass2，以此类推）。

如果你的section是后续通过JavaScript动态生成的，需要把这段代码放在元素创建完成后执行，或者用MutationObserver监听DOM变化，自动处理新添加的section元素。

内容的提问来源于stack exchange，提问作者Edward Brito