JS获取li元素访问innerText报undefined类型错误排查

你碰到的Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')错误，是JS执行时DOM还未渲染完成导致的。
当你的JS代码放在页面DOM结构之前加载（比如写在HTML的<head>区域），运行到document.getElementsByTagName("li")这行时，页面里还没有生成任何<li>节点，此时返回的元素集合是空的，访问liList[1]得到的是undefined，自然无法读取innerText属性。

三选一即可：

• 把script标签移动到所有页面内容的最末尾，也就是</body>标签的前面，确保JS执行时所有li元素已经完成渲染。
• 把所有DOM相关的操作逻辑包裹在DOMContentLoaded事件回调中，等DOM树解析完毕再执行逻辑：

document.addEventListener('DOMContentLoaded', () => {
  let liList = document.getElementsByTagName("li");
  console.log(liList[1].innerText);
  // 后续待办清单的点击、删除、标记完成等逻辑都可以写在这里
})

• 给引入外部JS的script标签添加defer属性，让浏览器等DOM解析完成后再执行脚本：

<script src="script.js" defer></script>

getElementsByTagName返回的是动态实时集合，后续你新增、删除页面里的li元素时，这个集合的内容会自动同步更新，不需要重复调用方法获取。如果需要固定住初始化时拿到的li列表，可以换成document.querySelectorAll('li')，这个方法返回的是静态NodeList，不会随DOM变动自动更新，做初始化事件绑定时不容易出预期外的问题。

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