querySelectorAll 和 getElementByTagName()两种方法使用上的区别

querySelectorAll跟getElementByTagName两种方法都可以用来获取页面中的元素

但是querySelectorAll获取的是静态的 也就是你页面本来就有的内容

而getElementByTagName获取的是动态的 可以由JS后期添加的内容

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')
        var lis = ul.getElementsByTagName('li')
        for (var i = 0;i<lis.length;i++) {
             var li = document.createElement('li')
             ul.appendChild(li)
         }
     </script>

此时 因为getElementByTagName是动态获取ul 中的 li 会造成lis.length 无限增加 相当于 本来有3个li 只需要循环3次 循环结束 我循环一次 给ul添加li 于是有了4个li 需要循环4次退出循环 然后就会造成死循环

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>


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

此时 querySelectorAll是静态获取 ul 中的li 于是此时的li.length一直是3 所以循环会循环3次退出