最好理解的getElement与querySelect区别

首先我们都知道getElement 和 querySelect 都是用来获取dom节点只不过是方式不同。

1.通过querySelector是静态获取的，而是用getElementsByClassName是动态获取，也就是说每一次使用都会去对dom节点调用一次。

var ul = document.getElementById('ul');
    var lits = ul.getElementsByTagName('li')
    for(var i = 0; i < lits.length; i++){
        ul.appendChild(document.createElement('li'))
    }

其中上述代码会无限循环造成卡死，原因是因为每一次for循环中，在ul内增加了新一条的li，下次的for循环length都会因为动态的dom查询而自增1，导致无限循环。

var ul = document.querySelector('#ul')
    var lis = ul.querySelectorAll('#ul li')
    for(var i = 0; i < lis.length; i ++){
        ul.appendChild(document.createElement('li'))
    }

这段代码不会造成卡死，因为是静态获取，lis的长度一直会维持在3这个数字，最终出来的是六个li。

 2.除了动态获取和静态获取，获取的节点也不同

        let inpt = document.querySelector(".inpt")
        let inpt1 = document.getElementsByClassName("inpt")
       console.log(inpt);
       console.log(inpt1);

获取input框的结果如下

通过动态获取的dom节点需要在 input1后面加个 [0] 

         let inpt = document.querySelector(".inpt")
        let inpt1 = document.getElementsByClassName("inpt")
       console.log(inpt);
       console.log(inpt1);
       console.log(inpt1[0]);

结果输入如下图

 

下面的一番话懂得自然懂好吧，记得留下你的评论和点赞。

它们两个的区别不大，都是要通过dom去获取原生节点，一个得到的是动态的集合，一个得到的集合是静态的，一个每使用一次都要去dom节点中调用一次，另一个获取一次之后得到的是一个死值，如果说他们两个非要有什么业务逻辑上的区别的话，一个再使用添加节点的时候会因为使用循环而导致无限的死循环，另一个使用节点方式添加的时候则不会。