javascript - 用DOM中的getElement获取按钮赋值一个变量，代码只执行一次，但为什么能动态的获取？

问题描述

问 题

实验：
做一个微博发布的功能，textarea输入内容点击发布，新增一个子节点(包括输入的文字和删除按钮)；点击删除，可以删除评论。

用一个变量dels，获取所有删除评论的按钮。

问题：这个变量dels只声明了一次
var dels = document.getElementsByClassName("bottom")[0].getElementsByTagName("button")，但为什么，每次点击发布按钮，都能动态的获取按钮的数量？

代码如下：

  var dels = document.getElementsByClassName("bottom")[0].getElementsByTagName("button");

 btn.onclick = function(){
//点击btn会添加一个li，包含文字和删除的button标签

console.log（dels.length）；
}

按道理，dels声明在前面，程序只执行一次，为什么打印出来dels却能根据生成的li来获取？
是getElementsByTagName的特殊效果吗？

解决方案

//旧答案
每当文档结构更新时，所有的HTMLCollection都会得到更新。也就是说dom集合有动态特性。
dom集合被自动更新之后dels引用内容就变了。//此行有瑕疵

XML DOM HTMLCollection

//补充回答
在使用innerHTML添加子元素会覆盖掉原有的子元素，虽然HTMLCollection更新了dom集合，但是原本的dels在innerHTML内的部分会变成全新的，事件失效。
使用appendChild则不会影响原有del的响应事件，只需给新添加的button重新绑定即可。

这篇关于javascript - 用DOM中的getElement获取按钮赋值一个变量，代码只执行一次，但为什么能动态的获取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！