如何遍历同class的li标签列表并修改其悬停时自身及子元素样式？

嘿，我来帮你解决这个悬停样式修改的问题！你已经用getElementsByClassName拿到了目标li的节点列表，接下来只需要给每个li绑定事件监听，然后在事件里操作样式就行，我给你一步步拆解：

首先，先假设你的HTML结构大概是这样（举个实际例子）：

<ul>
  <li class="target-li">
    父元素内容
    <p>子元素段落</p>
    <span>子元素 span</span>
  </li>
  <li class="target-li">
    第二个父元素
    <div>子元素 div</div>
  </li>
</ul>

接下来是JS部分的具体实现：

1. 获取节点列表：你已经完成这一步，getElementsByClassName返回的是HTMLCollection（类数组对象），我们可以直接遍历它。
2. 遍历并绑定事件：

// 获取所有class为target-li的li元素
const liList = document.getElementsByClassName('target-li');

// 遍历每个li元素
for (let i = 0; i < liList.length; i++) {
  const currentLi = liList[i];
  
  // 绑定鼠标悬停事件
  currentLi.addEventListener('mouseover', function() {
    // 修改当前li自身的样式
    this.style.backgroundColor = '#eef';
    this.style.padding = '10px';
    
    // 修改子元素的样式：这里提供两种方式
    // 方式1：选中当前li下的所有直接子元素
    const allChildren = this.children;
    for (let j = 0; j < allChildren.length; j++) {
      allChildren[j].style.color = '#228b22';
      allChildren[j].style.fontSize = '16px';
    }
    
    // 方式2：选中特定标签的子元素（比如只修改p标签）
    // const pChildren = this.querySelectorAll('p');
    // pChildren.forEach(p => {
    //   p.style.fontWeight = 'bold';
    // });
  });
  
  // 绑定鼠标离开事件，恢复原样式
  currentLi.addEventListener('mouseout', function() {
    // 恢复li自身样式
    this.style.backgroundColor = '';
    this.style.padding = '';
    
    // 恢复子元素样式
    const allChildren = this.children;
    for (let j = 0; j < allChildren.length; j++) {
      allChildren[j].style.color = '';
      allChildren[j].style.fontSize = '';
    }
  });
}

小技巧：用数组方法遍历 #

如果你更习惯用forEach，可以把HTMLCollection转成数组后遍历：

Array.from(liList).forEach(li => {
  li.addEventListener('mouseover', function() {
    // 复用上面的样式操作逻辑即可
  });
});

其实如果只是修改样式，完全不需要写JS，用CSS的:hover伪类就能轻松实现，代码更简洁高效，浏览器还会自动优化性能：

/* 悬停时修改li自身样式 */
.target-li:hover {
  background-color: #eef;
  padding: 10px;
}

/* 悬停时修改li下的所有子元素样式 */
.target-li:hover > * {
  color: #228b22;
  font-size: 16px;
}

/* 只修改特定子元素（比如p标签） */
.target-li:hover p {
  font-weight: bold;
}

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