JavaScript中querySelector和getElementByld(getXXXBy XX)的区别

        在日常开发中，我学使用原生JavaScript获取元素的时候，最常用的方法就document.getElementByld (getXXXByXX)方法。

        但是最近发 现有很多地方使用的是queryselector方法而不是使用前面的方法。去官方文档查看是这么说的： 文档对象模型Document引用的queryselector()方法返回文档中与指定选择器或选择器组匹配的第一个html元素Element。如果找不 到匹配项，则返回null。 这句话看意思和getElementByld (getXXXByXX)函数是一样的。

        其实大部分的时候这两种方法是可以互换的，总结一下两者的不 同之处。 其实这两种方法的区别就是获取动态集合和静态集合的关系。

        getElementById() (getXXXByXX)获取动态集合：通过函数获取元素之后，元素之后的改变还是会动态添加到已经获取的这个元素中。换句话说，通过这个方法获取到元羲存储到变量的时候，以后每一次在Javascript函数中使用这个变星的时候都会再去访问一下这个变量对应的html元素。

         queryselector。获取静态集合：通过函数获取元素之后，元素之后的改变并不会影响之前获取后存储到的变量。也就是获取到元素之后就和html中的这个元素没有关系了。