j_oop
angry ant
2017-05-02 14:08
采纳率: 33.3%
浏览 1.1k

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条回答 默认 最新

  • showbo
    已采纳

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

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

    点赞 评论
  • devmiao
    devmiao 2017-05-02 16:19
    点赞 评论
  • miaoch
    miaoch 2017-05-03 01:39

    是这样的 我测试了一下

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

    点赞 评论

相关推荐