本文详解如何通过 for 循环正确为多个 dom 元素统一添加 class 名（如 "cool"），指出常见循环条件错误，并提供更简洁、健壮的现代写法。

本文详解如何通过 for 循环正确为多个 dom 元素统一添加 class 名（如 "cool"），指出常见循环条件错误，并提供更简洁、健壮的现代写法。

在你的原始代码中，核心问题出在 for 循环的终止条件：for (i = 0; i > loopsLng; i++) —— 这会导致循环永不执行，因为初始时 i = 0，而 loopsLng 是正整数（如 5），0 > 5 为 false，循环体直接跳过。

✅ 正确写法应为：

for (let i = 0; i <p>此外，原代码还存在多处可优化点：</p>

• ❌ document.getElementById(loops[i]) 错误调用：loops[i] 已是 DOM 元素（由 getElementById 返回），再次传入 getElementById() 会尝试查找 ID 为 [object HTMLParagraphElement] 的元素，必然失败；
• ❌ getAttribute("class") 在首次运行时返回 null（因初始

  无 class 属性），导致 innerHTML 变成 "null"；

• ❌ 手动声明 5 个变量（loop1–loop5）冗余且难以维护。

? 推荐的现代、健壮写法如下：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

方式一：使用 querySelectorAll + forEach（推荐）

// 一次性获取所有目标 <p> 元素（ID 以 "cool" 开头）
const paragraphs = document.querySelectorAll('p[id^="cool"]');
paragraphs.forEach(p => {
  p.classList.add("cool"); // 安全添加 class（不覆盖已有类）
  p.textContent = "cool";  // 显示验证文本
});</p>

方式二：使用 for...of 循环（语义清晰）

const paragraphs = document.querySelectorAll('p[id^="cool"]');
for (const p of paragraphs) {
  p.className = "cool";
  p.textContent = "cool";
}

? 注意事项：

• classList.add() 比直接赋值 className 更安全，它不会清空原有 class；
• 使用 textContent 替代 innerHTML 可防止 XSS 风险，且性能更优；
• 若需兼容旧浏览器（如 IE9 以下），仍可用传统 for 循环，但务必修正条件为 i
• HTML 中建议为这些

  添加语义化或结构化标识（如统一 class 或 data 属性），比依赖 ID 前缀更易维护。

总结：一个看似微小的 > 与

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南