最近重新复习了一下js的基础部分，跟着视频学习整理了一下
js中获取元素的方法有以下几种
获取元素
- querySelector 返回节点
- querySelectorAll 返回 NodeList ，注意，这里的NodeList是静态的，不会随着页面内容的改变而改变
- getElementById 返回节点
- getElementsByClassName 返回 HTMLCollection
- getElementsByTagName 通过标签名称获取如 返回 HTMLCollection
- getElementsByName 通过name属性来获取 返回 NodeList
- document.body 获取body 元素
- document.documentElement 获取html元素
于是产生了疑问：什么是静态NodeList?静态究竟体现在哪儿
于是写代码验证了一下
html部分
<body>
<div>
<ul id="my-ul">
<li class="my-li" name="liname">1</li>
<li class="my-li" name="liname">2</li>
<li class="my-li" name="liname">3</li>
<li class="my-li" name="liname">4</li>
</ul>
</div>
<button id="addLiBtn">+ 1 li</button>
</body>
js部分
<script>
addLiBtn = document.querySelector('#addLiBtn')
my_ul = document.querySelector('#my-ul')
//通过querySelector ClassName TagName Name四种方式来获取同样的元素
allLiByQuery = document.querySelectorAll('.my-li')
allLiByClass = document.getElementsByClassName('my-li')
allLiByTag = my_ul.getElementsByTagName('li')
allLiByName = document.getElementsByName('liname')
//每次点击都会添加一个新的元素到ul中，并且输出四种方式获取的内容
addLiBtn.addEventListener('click',()=>{
my_ul.innerHTML += '<li class="my-li" name="liname">#</li>'
console.log(allLiByQuery);
console.log(allLiByClass);
console.log(allLiByTag);
console.log(allLiByName);
})
</script>
简单说明一下，就是我们在页面中放置了几个li标签，和一个button按钮，给按钮添加点击事件，每次点击都会添加一个新的li元素到ul中，并且每次点击都会输出 通过四种方式来获取的元素
结果如下
明明获取的都是同样的元素，唯独querySelectorAll拿到的却是不变的
再次修改代码，在上面点击事件的基础上添加两行，这次我们在点击按钮，添加完元素后，再次使用querySelectorAll来获取页面中的元素
//每次点击都会添加一个新的元素到ul中，并且输出四种方式获取的内容
addLiBtn.addEventListener('click',()=>{
my_ul.innerHTML += '<li class="my-li" name="liname">#</li>'
console.log(allLiByQuery);
console.log(allLiByClass);
console.log(allLiByTag);
console.log(allLiByName);
//再次使用querySelectorAll来获取页面中的元素
allLiByQuery = document.querySelectorAll('.my-li')
console.log(allLiByQuery);
})
结果如下
可以看到，这次querySelectorAll就能拿到 修改页面后 新增的元素了
总结一下，querySelectorAll能够获取的是 在执行这一行代码之前
allLiByQuery = document.querySelectorAll('.my-li')页面中存在的元素，获取到元素之后，无论页面怎么改变，获取的元素结果都不会发生变化，除非是在修改页面后，再次使用querySelectorAll来获取存在的元素。
querySelectorAll不同于其他的几种获取元素的方式，他们获取的元素是 动态的 能够随着页面的改变而发生改变
