document.getElementById无法绑定动态按钮，因其只在执行时查找一次DOM，而动态插入的按钮当时不存在；重复id导致后续调用返回null，引发事件监听失败。
为什么 document.getElementById 绑不了动态按钮
因为
只在执行时查找一次 DOM，而动态插入的按钮（比如用
或
添加）在那一刻根本不存在。更糟的是，如果重复插入相同
（如
），浏览器只认第一个，后续调用
会返回
，接着
就报
。
常见错误写法：
别再为每个新按钮单独查、单独绑——这既不可靠，又随节点增多拖慢性能。
绑定到哪个父容器才真正有效
选错父容器，事件委托就形同虚设。必须满足三个条件：始终存在、不被整个替换、能稳定包裹所有目标子元素。
✅ 推荐：
、
、
这类语义明确且生命周期长的容器
❌ 避免：
或
—— 虽然能兜底，但事件冒泡路径过长，影响性能，也容易被其他插件或脚本干扰
❌ 危险：
如果这个 div 本身是通过
全量重写的，那它里面的所有监听器都会丢失
一句话：找那个“你从来不会用
覆盖它”的父节点。
e.target.closest 是判断点击目标的唯一靠谱方式
不用
，也不用层层
上溯。这些在按钮里嵌了图标、文字或 span 时全会失效。
正确姿势是用
向上查找最近的匹配祖先（包括自己）：
兼容 IE9+，语义清晰，且天然支持按钮内任意结构（比如
）。
DOM 删除后，JavaScript 数据必须同步删
视图和状态脱节是最隐蔽的 bug 来源。DOM 上删了
，但
数组还留着对应项，下次
就会重复渲染，或者点击旧索引报错。
关键点：
不要靠按钮上的
属性传索引——容易错位、难维护
用
实时算位置，准确可靠
删除前确认
确实还在
里（防止异步操作导致重复触发）
委托事件不是“一劳永逸”，它只是把绑定逻辑收口到一处；数据一致性仍需你亲手维护——这点最容易被忽略，也最常引发后续问题。
document.getElementByIdinnerHTML +=insertAdjacentHTMLidid="delete-btn"getElementByIdnulladdEventListenerCannot set properties of nulltoDoList.innerHTML += '';
const btn = document.getElementById('delete-btn'); // 这里就已是 null
btn.addEventListener('click', handler); // 崩溃ul#toDoListdiv.product-gridsection.comment-listdocumentbodydiv.containerinnerHTML = ...innerHTML =e.target.className === 'delete-btn'parentNodeclosest()listContainer.addEventListener('click', e => {
const deleteBtn = e.target.closest('.delete-btn');
if (!deleteBtn) return;
const listItem = deleteBtn.closest('li');
if (!listItem) return;
// 现在可以安全移除 listItem，并同步更新数据数组
listItem.remove();
const index = Array.from(listContainer.children).indexOf(listItem);
todos.splice(index, 1);
});closest()litodosrender()data-indexArray.from(parent.children).indexOf(targetElement)targetElementparent.children