🌵知识点简介
静态获取（querySelectorAll）时，选出的所有元素的数组，不会随着文档操作而改变；
动态获取（getElementById）时，选出的所有元素的数组，会随着文档的操作而发生变化；
看代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.onload = function () {
var color = document.getElementById("color");
var lis = document.querySelectorAll("li");
// var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
color.appendChild(lis[i]);
}
};
</script>
<ul id="color">
<li>1red</li>
<li>2green</li>
<li>3blue</li>
<li>4yellow</li>
<li>5pink</li>
</ul>
</body>
</html>静态获取querySelectorAll的结果是
静态获取数组的元素，数组元素按照顺序依次被遍历读取
动态获取getElementsByTagName
第一次循环，1插入到最后，2获得新的下标0，3获得新的下标1，
所以第二次插入到最后的是3，
5获得新的下标2，第三次插入到最后的是5
第四次循环，3获得新的下标3，插入到最后
动态获取的结果是
🌵知识点总结
getElementById
动态获取元素，只要原来的结构有变化，这就能监听到，它会重新去获取一次元素，那这个时候原来的下标就变化了，变成新的下标了
querySelectorAll
静态获取元素，只获取一次，会把下标存下来，即使原来的结构有变化，也不会重新去获取。
