大家看看为什么我这个代码去掉break也不会报错,按说会陷入死循环的啊?
会飞的辣翔
2016-09-04 01:16
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var li=document.createElement('li');
li.innerHTML='php';
var oChild=otest.childNodes;
for(var i=0;i<oChild.length;i++){
if(oChild[i].innerHTML=='HTML'){
otest.insertBefore(li,oChild[i]);
break;
}
document.write(otest.childNodes.length+',');//没有break的话是5,5,5,6,6,6,
}
</script>
</body>
</html>
3回答
-
- 魔法师李维
- 2016-09-18 10:30:19
不会出现死循环 ，当你把 var oChild=otest.childNodes;这句写出来时，o
oChild已经是一个固定的值存在内存中了，你的otest已经对这个值没有任何影响了，循环该到哪里结束哪里结束，当然如果你直接写成
for(var i=0;i<otest.childNodes.length;i++){
if(otest.childNodes[i].innerHTML=='HTML'){
otest.insertBefore(li,otest.childNodes[i]);
break;
}
document.write(otest.childNodes.length+',');//没有break的话是5,5,5,6,6,6,
}
就知道了，还是会死循环的呀
-
- 会飞的辣翔
- 2016-09-05 10:30:57
出现死循环的可能是在if这里,你插入了兄弟节点后会改变oChild.length值,这样每插一次就增加一次,没完没了的,但是代码好像不是这样执行的,
var li=document.createElement('li');
li.innerHTML='php';
这两句从外面移植到if里,再去掉break就死了 ;这两句在外面的时候即使没有break也不会有问题,猜测和insertBefore运行规则(内存中已经存在某个元素时,只会插入一次,纯属猜想,并不知道是不是这样的)有关系 !
-
- 朝花bu夕拾
- 2016-09-04 11:00:39
怎么会死循环呢？首先你的oChild.length是3或者5(具体看浏览器的不同判定也不同)，这里的oChild.length是5;
然后我们来看你的循环语句，此时oChild.length是5; 由于你加了if判断语音，导致for循环到了oChild[i].innerHTML=='HTML'就停止执行(break);这个过程这执行了三次。所以下面会出现3个5()
把break取消后, otest.insertBefore(li,oChild[i]);在找到oChild[i].innerHTML=='HTML'插入了兄弟节点,所以后面会出现三个6（oChild.length由5变成6,）for语句在过程中在此被执行了3次；
如果还是不明白，你把
document.write(otest.childNodes.length+',');//没有break的话是5,5,5,6,6,6, 这段剪切到下面这段中去。就会明白了
if(oChild[i].innerHTML=='HTML'){
otest.insertBefore(li,oChild[i]);
break;
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题