日常知识集锦

childNodes.length的使用误区

在写HTML时候发现，想验证getElementsByTagName和querySelectorAll谁是返回的动态集合：
无论是使用的var ul = document.getElementsByTagName(“ul”)[0];
还是 var ul = document.querySelectorAll(“ul”)[0];
这个childNodes.length初始值都是3。
后来才发现，childNodes 拿到的是节点下的所有子节点，包括元素节点，文本节点和注释节点，一个注释，一个换行，一个使得length变成5。故此。

区分getElementsByTagName和querySelectorAll返回值

ByTagName的list是动态，受文档修改的影响，每执行一次length都会增加。

var ul = document.getElementsByTagName("ul")[0];
var list = ul.getElementsByTagName("li");
//用上述方法拿到ul下所有li节点，

//用条件语句给ul动态添加子元素
var newli = document.createElement("li");
ul.insertBefore(newli, ul.children[0]);
console.log(list.length);

相反的，SelectorAll的是静态的，不受文档变动影响。