操作getElementsByTagName返回的元素集合需要注

  <div id="ct">
    <p>hello</p>
   </div>
  <script>
    var ct = document.getElementById("ct");
    var paras = document.createElement("span");
    paras.innerText = "world";
    ct.appendChild(paras);
    //往div中添加<span>world</span>

//getElementsByTagName 方法
    //想试试删除p标签，于是懵逼了半天
    var el1 = document.getElementsByTagName('p')
    ct.appendChild(el1); // 错误示范
    ct.appendChild(el1[0]);// 删除成功 //需要位置下标

//querySelectorAll 方法
    var el2 = document.querySelectorAll("#ct p")
    ct.removeChild(el2[0]); //需要位置下标

//querySelector方法
    var el3 = document.querySelector("#ct p")
    ct.removeChild(el3)

  </script>

总结：

• getElementById 返回一个
• getElementsByclassName 返回类数组对象
• getElementsByName 返回类数组对象
• getElementsByTagName 返回类数组对象
  ES5元素
• querySelector 返回一个
• querySelectorAll 返回类数组对象

但凡类数组对象，删除的时候，都需要位置下标
getElements 获取到的数组多个元素，都不是真正的数组，都是伪装的数组

那么问题来了，我想删除多个

用一条语句删除一整个类数组对象，当然不行，BUT，我们有for循环

  <div id="myDiv">
    <p>hello world</p>
    <p>hello dolby</p>
    <p>hello dot</p>
    <p>hello bean</p>
  </div>

  var myDiv = document.getElementById("myDiv");
  var p = document.querySelectorAll("#myDiv p");
  for( i=0; i<p.length; i++ ){
    myDiv.removeChild( p[i] )
  }
//没问题，全部删除

BUT把querySelectorAll 换成 getElementsByTagName()就会出现问题

  var myDiv = document.getElementById("myDiv");
  var p = document.getElementsByTagName("p");
  for( i=0; i<p.length; i++ ){
    myDiv.removeChild( p[i] )
  }
//输出内容
  <div id="myDiv">
    <p>hello dolby</p>
    <p>hello bean</p>
  </div>

总结：如果是for循环遍历每一个p集合里的p，以刚刚的代码为例，依次删除p[0],p[1],p[2],p[3],那么首先删除hello world，删除后p集合长度为3，这个时候删除p[1]删除的就是hello dot，接着长度变为2,这是p[2],p[3],是不存在的所以没办法删除

• getElementById() 指定单一元素
• getElementsByClassName() 动态集合
• getElementsByTagName() 动态集合
• getElementsByName() 静态集合
• querySelector() 指定单一元素
• querySelectorAll() 静态集合

动态集合NodeList:任何元素的变化都会实时反映在返回的集合中。
静态集合NodeList:元素节点的变化无法实时反映在返回结果中。
所以换成getElementsByTagName时，返回动态集合，元素的变化实时反映在返回的集合中。

解决方法：

  <div id="myDiv">
    <p>hello world</p>
    <p>hello dolby</p>
    <p>hello dot</p>
    <p>hello bean</p>
  </div>
  <script>
    var div = document.getElementById("myDiv");
    var p = document.getElementsByTagName('p');
    for (var i=0,len=p.length,i<len,i++) {
      div.removeChild(p[0]);
      //永远删除第一个
    }
  </script>