同class元素批量样式修改代码优化求助：循环写法失效问题

需求：当class为ppp的<p>元素内容等于null时，修改它所在的class为box的<div>背景色。

目前只能通过document.getElementsByClassName获取元素后，用[0]、[1]这种索引逐个判断处理，元素多了代码会特别冗余。尝试用for循环简化但没生效，错误代码如下：

for(let i = 0; ppp.length > i; i++){
if(ppp[i].innerHTML == "null"){
this.style.background = "red";
}
}

用户提供的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Page title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
*{
margin: 0;
padding: 0;
}
body{
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100%;
   justify-content: center;
   align-items: center;
}
div{
   width: 50%;
   background: blue;
   color: white;
   font-size: 22px;
   padding: 10px;
   border-radius: 8px;
   margin: 5px 0;
   text-align: center;
}
@media (min-width: 600px){
body{
   flex-direction: row;
   gap: 10px;
}
div{
   font-size: 30px;
   padding: 15px;
}
}
   </style>
</head>
<body>
   <div class="box">
<p class="ppp">Philippines</p>
   </div>
   <div class="box">
<p class="ppp">Singapore</p>
   </div>
   <div class="box">
<p class="ppp">null</p>
   </div>
   <div class="box">
<p class="ppp">Japan</p>
   </div>
   <div class="box">
<p class="ppp">null</p>
   </div>

   <script>
var a = document.getElementsByClassName("box");
var b = document.getElementsByClassName("ppp");

if(b[0].innerHTML == "null"){
a[0].style.background = "red";
}
if(b[1].innerHTML == "null"){
a[1].style.background = "red";
}
if(b[2].innerHTML == "null"){
a[2].style.background = "red";
}
if(b[3].innerHTML == "null"){
a[3].style.background = "red";
}
if(b[4].innerHTML == "null"){
a[4].style.background = "red";
}
   </script>
</body>
</html>

错误原因 #

你写的循环里this没有指向对应的.box元素，所以无法修改背景色。另外可以通过更可靠的方式关联.ppp和它的父元素，避免索引依赖。

方案1：修正索引循环代码 #

先获取所有.box和.ppp元素，循环判断后修改对应索引的.box样式，同时加trim()避免文本里的空格干扰：

const boxes = document.getElementsByClassName("box");
const pppElements = document.getElementsByClassName("ppp");

for (let i = 0; i < pppElements.length; i++) {
  if (pppElements[i].innerHTML.trim() === "null") {
    boxes[i].style.background = "red";
  }
}

方案2：直接关联父元素（更可靠） #

不需要依赖索引，直接通过.ppp的父元素拿到.box，结构变动也不会出错：

const pppElements = document.querySelectorAll(".ppp");

pppElements.forEach(el => {
  // 用textContent比innerHTML更适合判断纯文本内容
  if (el.textContent.trim() === "null") {
    el.parentElement.style.background = "red";
  }
});

方案3：用CSS类控制样式（推荐） #

不直接操作元素style，而是通过添加/移除类的方式修改样式，更符合前端规范，也方便后续维护：
首先在CSS里新增一个类：

.box.red-bg {
  background: red;
}

然后修改JS代码：

const pppElements = document.querySelectorAll(".ppp");

pppElements.forEach(el => {
  const box = el.parentElement;
  if (el.textContent.trim() === "null") {
    box.classList.add("red-bg");
  } else {
    // 可选：如果需要在内容不是null时恢复默认背景
    box.classList.remove("red-bg");
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Page title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
*{
margin: 0;
padding: 0;
}
body{
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100%;
   justify-content: center;
   align-items: center;
}
.box{
   width: 50%;
   background: blue;
   color: white;
   font-size: 22px;
   padding: 10px;
   border-radius: 8px;
   margin: 5px 0;
   text-align: center;
}
.box.red-bg {
  background: red;
}
@media (min-width: 600px){
body{
   flex-direction: row;
   gap: 10px;
}
.box{
   font-size: 30px;
   padding: 15px;
}
}
   </style>
</head>
<body>
   <div class="box">
<p class="ppp">Philippines</p>
   </div>
   <div class="box">
<p class="ppp">Singapore</p>
   </div>
   <div class="box">
<p class="ppp">null</p>
   </div>
   <div class="box">
<p class="ppp">Japan</p>
   </div>
   <div class="box">
<p class="ppp">null</p>
   </div>

   <script>
const pppElements = document.querySelectorAll(".ppp");

pppElements.forEach(el => {
  const box = el.parentElement;
  if (el.textContent.trim() === "null") {
    box.classList.add("red-bg");
  } else {
    box.classList.remove("red-bg");
  }
});
   </script>
</body>
</html>

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