dom文档对象在碰到增,删的时候都会重新加载文档一遍,如果不知道这个技巧,那么在写代码的时候很可能一段你明显看起来很正确的代码却出现了你意想不到的结果.
我们先来看一个用dom方法删除一个ul下的所有li的例子
一个简单的html页面的例子如下:
<html>
<ul>
<li>第一个li节点</li>
<li>第二个li节点</li>
<li>第三个li节点</li>
<li>第四个li节点</li>
</ul>
</html>
javascript脚本代码如下:
<script>
window.onload = function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
ul.removeChild(li[i]);
}
}
</script>
这段代码会删除什么？把ul下的所有li都给删除了吗？我们运行后发现只把第一个和第三个的li节点删除了，为什么呢？因为就像我们在文章刚开始提出的那样,每次在删除一个dom节点的时候dom树就会重新加载并且排序,在删除第一个li节点后,dom重新排序,第二个li节点跑到了第一层,第三个li节点跑到了第二层...以此类推.那样我们对i做循环的时候删除li[1]的时候实际上删除的是第三个li节点,第二个li节点就被永久的保留了下来,后面以此类推,第四个li节点也会保留下来。
根据上面的猜想,可能有人会想我们删除在删除的时候直接删除li[0]的第一个节点就行了,所以可能会这样写javascript的代码:
<script>
window.onload = function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
ul.removeChild(li[0]);
}
}
</script>
这样是否就能把所有的li节点给删除了呢??运行后我们发现还是没有能够删除全部,而只是把第一个和第二个li节点给删除了.
这又是为什么？细心的朋友可能已经看出来的,因为我们把li.length写在了for循环的内部,这样每次在删除的时候li.length的值就会减小,这样它的值达不到4，所以不能全部删除.那么最终合理的删除ul下的所有li的版本是：
<script>
window.onload = function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
var len = li.length;
for(var i=0;i<len;i++){
ul.removeChild(li[0]);
}
}
</script>
我们只需要把li.length放在循环的外部就可以,大功告成.
通过上面的小例子我们可以发现,在dom进行修改和删除的时候一定要注意dom树重新加载的问题,避免写代码的时候出现最上面的两个版本的低级失误
我们先来看一个用dom方法删除一个ul下的所有li的例子
一个简单的html页面的例子如下:
<html>
<ul>
<li>第一个li节点</li>
<li>第二个li节点</li>
<li>第三个li节点</li>
<li>第四个li节点</li>
</ul>
</html>
javascript脚本代码如下:
<script>
window.onload = function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
ul.removeChild(li[i]);
}
}
</script>
这段代码会删除什么？把ul下的所有li都给删除了吗？我们运行后发现只把第一个和第三个的li节点删除了，为什么呢？因为就像我们在文章刚开始提出的那样,每次在删除一个dom节点的时候dom树就会重新加载并且排序,在删除第一个li节点后,dom重新排序,第二个li节点跑到了第一层,第三个li节点跑到了第二层...以此类推.那样我们对i做循环的时候删除li[1]的时候实际上删除的是第三个li节点,第二个li节点就被永久的保留了下来,后面以此类推,第四个li节点也会保留下来。
根据上面的猜想,可能有人会想我们删除在删除的时候直接删除li[0]的第一个节点就行了,所以可能会这样写javascript的代码:
<script>
window.onload = function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
ul.removeChild(li[0]);
}
}
</script>
这样是否就能把所有的li节点给删除了呢??运行后我们发现还是没有能够删除全部,而只是把第一个和第二个li节点给删除了.
这又是为什么？细心的朋友可能已经看出来的,因为我们把li.length写在了for循环的内部,这样每次在删除的时候li.length的值就会减小,这样它的值达不到4，所以不能全部删除.那么最终合理的删除ul下的所有li的版本是：
<script>
window.onload = function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
var len = li.length;
for(var i=0;i<len;i++){
ul.removeChild(li[0]);
}
}
</script>
我们只需要把li.length放在循环的外部就可以,大功告成.
通过上面的小例子我们可以发现,在dom进行修改和删除的时候一定要注意dom树重新加载的问题,避免写代码的时候出现最上面的两个版本的低级失误
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
