JavaScript:删除节点(removeChild)该留意的一点
2010-07-22 13:17
661 查看
假设div里有这么些内容:
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
现在要通过JavaScript的功能,将它们清空。
虽然可以通过一句代码直接实现:
document.getElementById("content").innerHTML=""
但是本文里主要讨论 removeChild 函数。
很想当然地以为借助下面的代码就能完成:
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0; i<content.childNodes.length; i++) {
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>
没想到,点击了按钮后,竟然只清除掉1、3、5,而2、4、6竟然没有消失,而是继续显示在页面上。
经过逐步研究,发现,上面代码里的for循环,相当于执行了下面的6句:
1、content.removeChild(content.childNodes[0]); 删除第1个节点
2、content.removeChild(content.childNodes[1]); 删除第2个节点
3、content.removeChild(content.childNodes[2]); 删除第3个节点
4、content.removeChild(content.childNodes[3]); 删除第4个节点
5、content.removeChild(content.childNodes[4]); 删除第5个节点
6、content.removeChild(content.childNodes[5]); 删除第6个节点
问题从一开始就产生了:
删除掉第一个节点后,后面节点的顺序全部发生了变化:原来的第二个节点往前蹭,成为新的第一个节点;原来的第三个节点,成为第二个节点……
于是呢,接下来原本是要删除第二个节点的,却将最原始的第三个节点给删除掉了。
最终,并没有全部删除,只删除掉1、3、5,留下了2、4、6。
语法没有错误,但是得不到所要的结果,这就是算法上面的错误!该如何修正呢?
“顺序删除”不行,那就“逆序删除”吧。将 for 语句修改一下:
for (var i=content.childNodes.length-1;i>=0;i--)
试试吧,成功了!
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=content.childNodes.length-1;i>=0;i--) {
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>
其实,也不一定要用逆序。方法2:
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0;i<content.childNodes.length;i++){
var childNode = content.childNodes[0]; //总是删除第一个,是不是更简单
content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>
转至:http://wangpfsir.blog.163.com/blog/static/67963727201043002658424/
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
现在要通过JavaScript的功能,将它们清空。
虽然可以通过一句代码直接实现:
document.getElementById("content").innerHTML=""
但是本文里主要讨论 removeChild 函数。
很想当然地以为借助下面的代码就能完成:
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0; i<content.childNodes.length; i++) {
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>
没想到,点击了按钮后,竟然只清除掉1、3、5,而2、4、6竟然没有消失,而是继续显示在页面上。
经过逐步研究,发现,上面代码里的for循环,相当于执行了下面的6句:
1、content.removeChild(content.childNodes[0]); 删除第1个节点
2、content.removeChild(content.childNodes[1]); 删除第2个节点
3、content.removeChild(content.childNodes[2]); 删除第3个节点
4、content.removeChild(content.childNodes[3]); 删除第4个节点
5、content.removeChild(content.childNodes[4]); 删除第5个节点
6、content.removeChild(content.childNodes[5]); 删除第6个节点
问题从一开始就产生了:
删除掉第一个节点后,后面节点的顺序全部发生了变化:原来的第二个节点往前蹭,成为新的第一个节点;原来的第三个节点,成为第二个节点……
于是呢,接下来原本是要删除第二个节点的,却将最原始的第三个节点给删除掉了。
最终,并没有全部删除,只删除掉1、3、5,留下了2、4、6。
语法没有错误,但是得不到所要的结果,这就是算法上面的错误!该如何修正呢?
“顺序删除”不行,那就“逆序删除”吧。将 for 语句修改一下:
for (var i=content.childNodes.length-1;i>=0;i--)
试试吧,成功了!
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=content.childNodes.length-1;i>=0;i--) {
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>
其实,也不一定要用逆序。方法2:
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0;i<content.childNodes.length;i++){
var childNode = content.childNodes[0]; //总是删除第一个,是不是更简单
content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>
转至:http://wangpfsir.blog.163.com/blog/static/67963727201043002658424/
相关文章推荐
- JavaScript:删除节点(removeChild)该留意的一点
- JavaScript:删除节点(removeChild)该留意的一点
- JavaScript:删除节点(removeChild)该留意的一点
- Javascript removeChild()不能删除全部子节点的解决办法
- Javascript removeChild()删除节点及删除子节点的方法
- Javascript removeChild()删除节点及删除子节点的方法
- DOM节点删除函数removeChild()用法实例
- 利用循环removeChild删除节点只删除一半问题
- jaxp dom-removeChild xml中删除一个节点
- JavaScript基础 点击超链接删除 一个表格中的某一行 parentNode.removeChild
- JavaScript删除元素removeChild
- JavaScript基础 点击超链接删除 一个表格中的某一行 parentNode.removeChild
- DOM节点删除函数removeChild()用法实例
- 自学javascript笔记_自用_解析W3school的代码_创建删除节点
- javascript中dom节点操作(创建节点、增加节点、删除节点、克隆节点)
- javascript删除节点的兼容问题。
- JavaScript Array Remove 最好的删除数组元素的方法
- javascript实现二叉树排序,前中后序遍历,最大最小值特定值查询以及删除节点
- removeChild()不能彻底删除影片剪辑……