getElement系列和querySelector系列区别

知识回顾：

 ① 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时：