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

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

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

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

提问者：阿宅娘 2018-03-21 17:50

个回答

慕后端3860619

2018-03-23 12:48:25

已采纳

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

0
努力让世界更美好

2018-03-22 12:22:30

这个也困扰我也……

0
努力让世界更美好

2018-03-22 09:28:05

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

0

努力让世界更美好: 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]);    
      }
  }