今天在学习vue源码的过程中，发现了一种获取dom元素时，我不经常使用的document.querySelector方法，乍一看querySelector还以为是jquery上的方法，谁让他们的名字都有个query
那么querySelector 和 getElementById、getElementsByClassname、getElementsByTagName
这类方法究竟有什么区别？
查阅文档：
- querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 [NodeList] 对象。
2.[document.getElementsByClassName()]： 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
[document.getElementById()]：返回对拥有指定 id 的第一个对象的引用。
[document.getElementsByName()]：返回带有指定名称的对象集合。
[document.getElementsByTagName()]：返回带有指定标签名的对象集合。
从文档里其实也没有看出在使用上有什么区别，经过我的实验 在获取dom元素时，获取到的元素经过对比也无差异，令我费解。好在有万能的搜索引擎，告诉了我答案
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。
这句话是的难点在于对静态和动态的理解，什么是静态，什么是动态？
<body>
<div id="test">
<p v-model="aa">text</p>
<p>text</p>
</div>
</body>
<script>
var querySelector = document.querySelector('#test')
var getElementById = document.getElementById('test')
console.log(querySelector === getElementById) // true
var querySelectorAll = document.querySelectorAll('p')
for(let i=0;i < querySelectorAll.length;i++){
querySelector.appendChild(document.createElement('p'))
}
console.log(querySelectorAll.length) //值为2,动态添加元素并没有使querySelectorAll发生变化
var getElementsByTagName = document.getElementsByTagName('p')
for(let i=0;i < 3;i++){
getElementById.appendChild(document.createElement('p'))
}
console.log(getElementsByTagName.length) //值为4+3=7,每次动态添加元素都使getElementsByTagName发生了变化
</script>
通过代码一目了然的理解所谓的动态和静态是什么含义
记录下来，以加深理解和记忆
