javaScript中获取获取标签的问题

目的是对下拉选框中的所有标签进行操作,定义下拉选框的代码为

 <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]
 求大神指点

3个回答

document.getElementById("left").options你这样是每次调用left的options,你添加到right后就少一个

document.getElementsByTagName("option")是所有option集合,你再怎么添加这个集合一个都不会少,直接死循环了

j_oop
angry ant 哈哈,原来是这个原因啊,受教了,谢谢
3 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复caozhy: 除非去掉里面的i--,直接遍历下一个,而不是i--保留在又退回到上一个位置,要不碰到第一个selected的option就死循环了。
3 年多之前 回复
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 学习了
3 年多之前 回复
j_oop
angry ant 谢谢分享,不过楼上是正解
3 年多之前 回复

是这样的 我测试了一下

 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--的死循环中。

j_oop
angry ant 嗯,回答的非常用心,谢谢啦,我理解了
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐