知识回顾：
①
document.querySelector
方法接受一个
CSS 选择器
作为参数，
返回匹配该选择器的元素节点
。
②
document.querySelectorAll
方法与
querySelector
用法类似，区别是
返回一个
NodeList
对象，
包含所有匹配给定选择器的节点。
③
document.getElementsByClassName()
方法
返回一个
类似数组的对象
（
HTMLCollection
实例），包括了所有
class
名字符合指定条件的元素，元素的变化实时反映在返回结果中。
④
document.getElementById()
方法
返回匹配指定
id
属性的元素节点。
如果没有发现匹配的节点，则返回
null
。
⑤
document.getElementsByTagName()
方法搜索 HTML 标签名，
返回符合条件的元素
。它的返回值是一个
类似数组对象
（
HTMLCollection
实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。
⑥
document.getElementsByName()
方法用于选择拥有
name
属性的 HTML 元素（比如
<form>
、
<radio>
、
<img>
、
<frame>
、
<embed>
等）
，返回一个
类似数组的的对象
（
NodeList
实例），因为
name
属性相同的元素可能不止一个。
区别：
querySelectorAll
的返回结果
不是动态集合
，不会实时反映元素节点的变化。
1）
querySelector
IE低版本不支持
2）
getElement
可以获取动态新增的元素节点；
querySelector
不支持动态新增的元素；
实例：
添加一个li为例
html部分：
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<button id = 'btn'>添加li</button>
<script>script部分：
<script>
//1.获取元素节点
let li1=document.getElementsByTagName('li')//返回类数组对象
//用不同的获取方式获取li进行对比
let li2=document.querySelectorAll('li')//返回类数组对象
console.log(li1);//HTMLCollection(5)
console.log(li2);//NodeList(5)
//获取按钮
let btn = document.getElementById('btn')
//获取ul
let ul = document.getElementsByTagName('ul')//类数组对象 获取时需要加下标
// let ul = document.querySelector('ul')//返回匹配该选择器的元素节点 获取时不需要加下标
console.log(ul);
//2.绑定点击事件
btn.onclick=()=>{
//点击按钮添加li
//2.1创建li
let li = document.createElement('li');
//2.2给li设置内容
li.innerHTML='添加的内容';
//2.3 添加到ul中
ul[0].appendChild(li);
//控制台打印li1和li2
console.log(li1);
console.log(li2);
}
</script>获取li：
添加新li时：
