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

Question

实验：
做一个微博发布的功能，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的特殊效果吗？

Answer 1

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

XML DOM HTMLCollection

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

Answer 2

dels代表document.getElementsByClassName("bottom")[0].getElementsByTagName("button")
你调用的是dels.length
相当于执行document.getElementsByClassName("bottom")[0].getElementsByTagName("button").length

Answer 3

html:

<input type="text">
<input type="text">
<input type="text">
<input id="btn" type="button">
<p id="myInputList"></p>

js:

var inputArr = [];
var len = document.getElementsByTagName("input").length;
for(var i = 0;i < len;i ++){
  inputArr.push(document.getElementsByTagName("input")[i].cloneNode());
}
var btn = document.getElementById("btn");
btn.onclick = function(){
    var a = document.createElement("input");
    document.getElementById("myInputList").appendChild(a);
    console.log(inputArr.length);
    console.log(document.getElementsByTagName("input").length);
}