代码如下，为什么这样写，清除节点时，button也会被删除？？-慕课网

代码如下，为什么这样写，清除节点时，button也会被删除？？

来源：9-14 删除节点removeChild()

阿宅娘

2018-03-21 17:50

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
var myh1 = content.childNodes;
for(i=0;i<myh1.length;i++){
var a = content.removeChild(myh1[i]);
}
document.write("所有节点已删除");
}
</script>

<button onclick="clearText()">清除节点内容</button>

</body>
</html>

写回答关注

4回答

慕后端3860619

2018-03-23 12:48:25

已采纳

document.write()在function clearText()内，页面加载时没有运行。当function clearText()动作启用时，代码document.write()会代替页面内所有东西。解决办法就是写在动作外，页面加载时候就运行则不会覆盖。

1 0

阿宅娘

谢谢，之前都不知道这一点

2018-03-23 14:42:30

共 1 条回复 >
努力让世界更美好

2018-03-22 12:22:30

这个也困扰我也……

0 0
努力让世界更美好

2018-03-22 09:28:05

遇到文本节点就不能删除若需要一次全部删除改成如下：这句有问题，将其中的文本节点改成空白节点

1 0

阿宅娘

恩恩，改成这样，也可以一次性全删除： for(i=0;i<myh1.length;i=i){ content.removeChild(myh1[i]); } 就是神鬼畜为什么加document.write()效果就完全不一样了！！？这个到底怎么影响啊，用alert()也没问题，就是document.write()

2018-03-22 11:08:53

共 1 条回复 >

努力让世界更美好: 2018-03-22 09:26:38

function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
  var myh1 = content.childNodes;
  for(i=0;i<myh1.length;i++){
      var a = content.removeChild(myh1[i]);
  }
  //document.write("所有节点已删除");  //这句注释掉就好了
}

将上边的document.write("所有节点已删除");这句注释掉就好了，至于原因，愚也没搞懂……即使注释掉这句也不能一次将所有删除掉（IE浏览器是可以的，IE浏览器不会识别空白节点），遇到文本节点就不能删除若需要一次全部删除改成如下：

function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数

  for (var i=0;i<content.childNodes.length;i++){
      
      if(content.childNodes[i].nodeType!=1){   //判断节点nodeType是否为1, 如是为元素节点，跳过。https://www.imooc.com/code/1593
         continue;  
      }else{
         content.removeChild(content.childNodes[i]);    
      }
  }

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468060 学习 · 21891 问题

查看课程

相似问题

删除节点代码

回答 1

清除节点：为什么我这个要点两次才能清除？？？

回答 1

这样删除节点对吗？

回答 3

为何删除了节点，代码有什么问题

回答 2

删除子节点时，返回的被删除节点x是在函数里定义的，那出了函数会被自动清理内存吗？

回答 1

打开慕课网App查看更多内容