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