选择 DOM 与渲染内容

这一节要完成什么

把 JavaScript 数据安全地显示为列表、进度文字和空状态。

先理解：为什么要学它

把 JavaScript 数据安全地显示为列表、进度文字和空状态。

跟着做

const list = document.querySelector('#session-list');
function renderSessions(items) {
  list.replaceChildren();
  if (!items.length) {
    list.textContent = '还没有学习记录。';
    return;
  }
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = `${item.topic} · ${item.minutes} 分钟`;
    list.append(li);
  }
}

1. 打开上一节保留的项目，先运行当前版本并记录结果。
2. 输入示例并逐行运行，完成：渲染两条记录和空数组；内容来自用户时坚持使用 textContent。
3. 至少改变一个输入，先预测结果，再用浏览器验证。
4. 故意制造本节典型错误，再根据错误信息修复：querySelector 返回 null 时先检查选择器与脚本执行时机，不要盲目加非空断言。

关键代码怎么读

• 把 JavaScript 数据安全地显示为列表、进度文字和空状态。
• 代码要按输入、处理、输出三部分阅读；先指出每一部分在哪里。
• 能运行只是第一步，完成后必须用不同输入验证边界。

常见错误：看到什么，检查什么

自己完成一次

渲染两条记录和空数组；内容来自用户时坚持使用 textContent。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况