                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

代码如下，为什么这样写，清除节点时，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

源自：JavaScript进阶篇 9-14

关注问题我要回答

713

操作

收起

4 回答

慕后端3860619 回答被采纳 +2 积分
2018-03-23

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

0 回复有任何疑惑可以回复我~

收起回答

阿宅娘提问者

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

2018-03-23 回复有任何疑惑可以回复我~

努力让世界更美好
2018-03-22

这个也困扰我也……

0 回复有任何疑惑可以回复我~

收起回答

努力让世界更美好
2018-03-22

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

0 回复有任何疑惑可以回复我~

收起回答

阿宅娘提问者

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

2018-03-22 回复有任何疑惑可以回复我~

努力让世界更美好
2018-03-22

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 回复有任何疑惑可以回复我~

收起回答