Foreach循环中If else语句问题：指定ID元素排除逻辑失效

我编写的JavaScript代码意图获取类名为windows的父元素innerHTML，处理子元素属性后生成类似html1=innerHTML、html2=innerHTML的结果。但添加排除ID为windows-s、windows-f、windows-p元素的逻辑后无法生效，原代码如下：

var html;
var windows = document.getElementsByClassName("windows");
for (var i = 0; i < windows.length; i++) {

var win = document.getElementById(windows[i].id);

if(win.id == "windows-s" || win.id == "windows-f" || win.id == "windows-p"){
    
}else{
    var win_el = document.getElementById(win.id).id;
    win_el.forEach(function(div){

    div.removeAttribute("style");
    var clonedDiv = div.cloneNode(true);
    var inner_HTML = clonedDiv.innerHTML;
    
    html += "HTML"+ i++ +"=" + inner_HTML + ",";
    )}
}
console.log(html);
}

问题分析 #

1. 冗余DOM获取：windows[i]本身就是目标DOM元素，无需再通过document.getElementById(windows[i].id)重复获取win，完全多余。
2. 核心错误导致代码中断：var win_el = document.getElementById(win.id).id;这行将元素的ID字符串赋值给了win_el，而字符串没有forEach方法，执行到这里会直接报错，导致后续代码（包括排除逻辑的后续处理）全部终止，看起来像是排除逻辑失效，实际是代码报错中断。
3. 变量未初始化：html变量未初始化为空字符串，直接执行html += ...会拼接出undefinedHTML1=...的错误结果。
4. 索引混乱：循环内的i++会和外层for循环的i++叠加，导致元素遍历跳步。
5. DOM操作风险：直接修改原元素的style属性，会影响页面显示，应该操作克隆后的元素。

修正后的代码 #

// 初始化html为空字符串，避免undefined前缀
let html = '';
// 使用querySelectorAll获取静态元素集合，遍历更稳定
const windows = document.querySelectorAll('.windows');

// 遍历元素，自带索引避免混乱
windows.forEach((win, index) => {
    // 定义排除ID列表，便于维护
    const excludedIds = ['windows-s', 'windows-f', 'windows-p'];
    // 匹配到排除ID则直接跳过当前元素
    if (excludedIds.includes(win.id)) return;

    // 假设需要遍历当前元素下的所有div，可根据实际需求调整选择器
    const childDivs = win.querySelectorAll('div');
    childDivs.forEach(div => {
        // 克隆元素，避免修改原页面DOM
        const clonedDiv = div.cloneNode(true);
        clonedDiv.removeAttribute('style');
        const innerHTML = clonedDiv.innerHTML;
        // 用index+1生成连续的html1、html2标识
        html += `HTML${index + 1}=${innerHTML},`;
    });
});

// 移除末尾多余的逗号
html = html.replace(/,$/, '');
console.log(html);

关键修正点 #

• 用querySelectorAll替代getElementsByClassName，返回静态集合，避免动态集合在遍历中出现的元素计数变化问题。
• 直接使用遍历到的win元素，去掉冗余的getElementById调用。
• 用数组includes方法判断排除ID，代码更简洁易扩展。
• 初始化html为空字符串，避免undefined前缀。
• 操作克隆后的元素，不影响原页面DOM结构。
• 移除循环内重复的i++，使用forEach自带的索引保证遍历顺序和计数正确。
• 最后清理结果末尾的多余逗号，输出格式更规范。

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