下面的代码为什么不会无限循环下去呢?我删除了一个子元素也添加了一个子元素,应该是无限循环的吧?

<!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 conCl=content.childNodes;

    if(conCl[0]!=1)

    {

        content.removeChild(conCl[0]);

    }

    var x=content.removeChild(conCl[0]);

    var newh1=document.createElement("h1");  

    newh1.innerHTML=x.innerHTML;  

    content.appendChild(newh1);

}

</script>

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

</body>

</html>


徐锦杰
浏览 1435回答 3
3回答

stone310

 if(conCl[0]!=1)这里是 if(conCl[0].nodeType!=1)

0101

因为删除了两个,标签与标签之间的空白也是算节点的。一开始有11个节点,你点一次,就删除最开始的那个空白节点,然后把第二个 h1 节点移到最后面,第二次删除了第三个空白节点,第三次删除了第五个空白节点,第四次删除了第七个空白节点,第五次删除了第九个空白节点,第六次删除了第十一个空白节点,也就是最后一个,所以从第七次点击开始,都会少一个。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript