getElement 和 querySelect的区别（超详细）

已知：它们两个都是用来获取dom节点的。

它们的区别是：

• getElementById() 返回对拥有指定 ID 的第一个对象的引用；
• getElementsByTagName() 返回带有指定标签名的对象的集合；
• getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始；

得到的是动态的集合，每使用一次都要去dom节点中调用一次，在使用添加节点的时候会因为使用循环而导致无限的死循环（卡死）。下面代码会无限循环造成卡死，原因是因为每一次for循环中，在ul内增加了新一条的li，下次的for循环length都会因为动态的dom查询而自增1，导致无限循环。

• querySelector() 返回文档中匹配指定 CSS 选择器的一个元素；
• querySelectorAll() 返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

得到的集合是静态的，获取一次之后得到的是一个死值，使用节点方式添加的时候不会卡死。下面代码不会造成卡死，因为是静态获取，lis的长度一直会维持在3这个数字，最终出来的是六个li。

举例：最简单的 element对象代码，如下所示。innerHTML有获取和输出两种功能，此处执行的是 输出功能。