removeChild()问题

最新推荐文章于 2023-09-08 22:35:52 发布

weixin_34161083

最新推荐文章于 2023-09-08 22:35:52 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hyfhxz/p/4866467.html

版权

今天做慕课网上JavaScript进阶课程中9-14节中的课后练习，9-14内容为删除节点removeChild(),任务如下：

<!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");
  //在此完成该函数 
  }
</script>
<button οnclick="clearText()">清除节点内容</button>
</body>
</html>

按课程上例子的样子我做的代码：

<script type="text/javascript">
function clearText() {  
  var content=document.getElementById("content");
  var x=content.getElementsByTagName("h1");
for (var i=0;i<x.length;i++){
      content.removeChild(x[i]);
  }
}
</script>

但在运行时发现了问题，点击按钮后，总是1、3、5这样的消除，2、4留下，然后成为1、2，点击按钮后，再次只消除单数的。语法上是没有错误的，百思不得其解，就去找百度，搜索到一个博客上提到此问题，但他也是只提供了解决的方法，只是怀疑说是在算法上出问题，算法我不懂啊。。。。。。按博主提供的方法，把for循环i的顺序改变下：

1 function clearText() {      
2   var content=document.getElementById("content");
3   var x=content.getElementsByTagName("h1");
4     for (var i=x.length-1;i>=0;i--){
5       content.removeChild(x[i]);
6   }
7 }
8 </script>

尝试把i=x.length-1去掉减1，代码无法运行。x.length的值为5，x数组下标为0、1、2、3、4。不减1的话，在执行 content.removeChild(x[i]) 时，i=5，是否是因为Html中并没有第五个h1节点，所以script运行出错？只能先这么认为，以后的学习中再去验证。

转载于:https://www.cnblogs.com/hyfhxz/p/4866467.html