JavaScript DOM中children与lastElementChild的差异及代码异常问题求解

• children[2] 属于硬编码索引的访问方式，强依赖父元素的子元素结构：children 只会返回元素节点，索引从0开始计数，只有当父元素下的子元素数量刚好为3、且你需要的计数字段固定排在第3位时，才能命中目标节点。同时children 返回的是实时更新的HTMLCollection，如果你在其他逻辑中动态增删了父元素的子节点、或是后续调整了DOM结构（比如新增元素节点、调换子元素排列顺序），索引2指向的就会变为非目标节点，自然无法正确读取、修改计数值，导致代码失效。
• lastElementChild 是动态获取父元素最后一个元素节点的方法，不受前序子元素的数量、排列顺序影响：只要你的计数字段固定放在父元素的最末尾，不管前面怎么调整结构，都能准确拿到目标节点，所以修改后代码可以正常运行。

你可以在原代码中插入console.log(target.parentElement.children)，打印父元素的子元素列表，就能直观看到索引2对应的节点是否为你预期的计数字段。

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