目的是对下拉选框中的所有标签进行操作,定义下拉选框的代码为
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
该文件中所有的<option>标签都在上面的<select>标签中,
对<option>进行抓取并操作的代码是
document.getElementById("toRight2").onclick=function()
{
arr = document.getElementById("left").options;
for(i=0;i<arr.length;i++)
{
if(arr[i].selected)
{
document.getElementById("right").appendChild(arr[i]);
i--;
//注意:将元素添加至右边后,左边的option元素个数就减少1,所移动元素之后的标签索引减1,
//为了仍然能够遍历所有的元素,应手动将当前索引值减一。
}
}
}
arr = document.getElementsByTagName("option");
运行时触发事件,则浏览器会无响应进入卡死状态,请问这是什么原因啊?这两种获取方式有什么不同吗?通过打印这两种方式获取的数组,我发现方式一得到的数组类型是[object HTMLOption Collection ]而方式二得到的数组类型是[object HTML Collection]
求大神指点
document.getElementById("left").options你这样是每次调用left的options,你添加到right后就少一个
document.getElementsByTagName("option")是所有option集合,你再怎么添加这个集合一个都不会少,直接死循环了
http://www.jb51.net/article/61737.htm
是这样的 我测试了一下
arr = document.getElementsByTagName("option");
arr = document.getElementById("left").options;
这两个获取的类型,上面一个就是节点类型集合,后面那个是option节点类型集合,总得来说后面那个是前面的子类,但是这个不是重点。
用 document.getElementsByTagName("option");获得的是document下的所有option节点,而document.getElementById("left").options;
只是获得left下面的option节点。
这两个集合首先都是动态的,即每次arr.length都会重新计算一次。
那么问题来了 document下的所有option节点数量是不会变的.
假设是这样一个情况,你左边节点有5个,右边节点0个
你从左边选择一个比如说你选了第三个,那遍历到第三个的时候,会把arr[2]移动到right下,但是这个时候因为右边只有一个所以arr[2]这个节点的sleelct特性会是true,且因为这个集合是动态的,此时这个arr[2]就变成了arr[4] 你理解吗。
然后到最后就会一直在 arr[4]->appendchild-right->arr[4]->i--的死循环中。