javaScript中获取获取标签的问题

Question

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

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

Answer 1

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

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