js基础---querySelector系列和getElementsBy系列获取页面元素的最大差异（返回值的属性区别）

先上结论：

querySelectorAll()返回的是一个静态节点列表(Static NodeList)

getElementsBy系列的返回的是一个动态节点列表(Live NodeList)。

例子：

html

    <ul>
      <li><a href="">1112</a></li>
      <li><a href="">2112</a></li>
      <li><a href="">3112</a></li>
      <li><a href="">4112</a></li>
    </ul>

使用querySelector系列分别在页面动态插入li前后获取元素

var ul = document.querySelector("ul");
      var lis = document.querySelectorAll("li");
      console.log(lis); // NodeList(4) [li, li, li, li]
      
      for (var i = 0; i < lis.length; i++) {
        var newLi = document.createElement("li");
        newLi.innerHTML = "333" + i;
        ul.appendChild(newLi); 
      }

      console.log(lis);  // NodeList(8) [li, li, li, li，li,li,li,li]

动态追加前后获取的lis个数不一样

使用getElementsBy系列获取页面元素

var ul = document.getElementsByTagName('ul')[0];
    var lis = document.getElementsByTagName('li');
    console.log(ul);
    console.log(lis); // HTMLCollection(8)

      for (var i = 0; i < 4; i++) {
        var newLi = document.createElement("li");
        newLi.innerHTML = "333" + i;
        console.log(lis.length);
        ul.appendChild(newLi); 
      }

      var ul1 = document.getElementsByTagName('ul')[0];
      var lis1 = document.getElementsByTagName('li');
      console.log(lis1); // HTMLCollection(8)

动态append元素前后，lis的值一样

js基础---querySelector系列和getElementsBy系列获取页面元素的最大差异（返回值的属性区别）

相关推荐