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

  

    
hello
   
  

总结：

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

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

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

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

  

    
hello world
    
hello dolby
    
hello dot
    
hello bean
  

  var myDiv = document.getElementById("myDiv");
  var p = document.querySelectorAll("#myDiv p");
  for( i=0; i

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

  var myDiv = document.getElementById("myDiv");
  var p = document.getElementsByTagName("p");
  for( i=0; i
    
hello dolby
    
hello bean
  

总结：如果是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时，返回动态集合，元素的变化实时反映在返回的集合中。

解决方法：

  

    
hello world
    
hello dolby
    
hello dot
    
hello bean