获取ul下li的data属性键值对时forEach报错，求排查问题

首先，你遇到的Array.prototype.forEach called on null or undefined错误，核心原因是你尝试调用forEach的对象是null或者undefined，结合你说单个ID选中li能正常工作的情况，大概率是下面两个问题之一：

1. 脚本执行时机过早，DOM还没渲染完成 #

如果你的脚本写在<head>标签里，或者页面内容还没加载完就执行了，那document.querySelectorAll('ul li')（或者你用的其他选择器）会返回空的NodeList，甚至在某些错误写法下返回null，这时候调用forEach自然会报错。而单个ID选中li能工作，可能是那个li刚好在脚本之前被渲染了，或者你测试时脚本位置刚好合适。

2. 选择器/获取元素的方法用错了 #

比如你误把querySelectorAll写成了querySelector，后者只会返回第一个匹配的元素（如果没找到就是null），对单个元素调用forEach肯定会报错，因为单个DOM元素没有这个方法。

修复后的完整代码示例 #

下面是能正常获取所有li的data属性的代码，我帮你做了优化，同时确保DOM加载完成后再执行：

// 等待整个DOM结构加载完成后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
  // 获取ul下的所有li元素（返回NodeList，支持forEach）
  const listItems = document.querySelectorAll('ul li');
  
  // 遍历每个li元素
  listItems.forEach(li => {
    const dataProps = {};
    // 遍历当前li的所有属性
    for (const attr of li.attributes) {
      // 筛选出以data-开头的属性
      if (attr.name.startsWith('data-')) {
        // 去掉data-前缀作为键，属性值作为值
        const key = attr.name.slice(5);
        dataProps[key] = attr.value;
        // 如果需要转成对应类型（比如数字），可以加判断：
        // dataProps[key] = isNaN(attr.value) ? attr.value : Number(attr.value);
      }
    }
    console.log(dataProps);
    // 这里可以把dataProps存入数组或者做其他处理
  });
});

额外说明 #

• 如果你不想用DOMContentLoaded事件，也可以把脚本放在<body>标签的最后面，这样页面元素都渲染完成后才会执行脚本。
• 如果你需要把所有li的data对象收集到一个数组里，可以在循环外定义一个空数组，每次循环把dataProps push进去即可。

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