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

    <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>

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]

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)