动态生成<li>元素display样式修改报错问题排查

错误原因 #

document.querySelectorAll('[data-slide]')返回的是NodeList对象，并非普通数组。用for...in遍历的时候，会把NodeList自带的属性（比如length、item方法这些）也遍历进去，这些属性对应的值不是DOM元素，自然没有style属性，所以才会报style is undefined的错。

另外你说打印listItems.style有输出，其实是个误区——NodeList本身根本没有style属性，大概率是控制台显示的误导，或者你误操作选中了集合里的某个DOM元素，才看到了style相关信息。

正确修改方式 #

推荐三种靠谱的遍历方法：

1. for...of循环（现代浏览器直接用，最简洁）

const listItems = document.querySelectorAll('[data-slide]');
for (const item of listItems) {
  item.style.display = 'block'; // 改成你需要的display值，比如'none'或者'inline'
}

2. 普通for循环（兼容旧浏览器）

const listItems = document.querySelectorAll('[data-slide]');
for (let i = 0; i < listItems.length; i++) {
  listItems[i].style.display = 'block';
}

3. 转数组后用forEach（灵活，适合需要额外操作的场景）

// 把NodeList转成数组
const listItems = Array.from(document.querySelectorAll('[data-slide]'));
listItems.forEach(item => {
  item.style.display = 'block';
});

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