菜鸟急问啊，为啥这段代码在IE上会卡死

Question

点击button的时候页面就会卡死奔溃。。<p id="d1">black sheep wall</p>
<input name="d2" value="Hello(name=d2)" />
<input name="d2" value="World(name=d2)" />
<p>Javascript(tagNmae=p)</p><textarea id="output" style="width:420px;height:120px;"></textarea><br /><br />
<button onclick="getByName('d2')">getElementByName</button><br />
<button onclick="getByTagName('p')">getElementsByTagName("p")</button>
<script type="text/javascript">
    function getByName(tagName) {
        output.value = '';
        for (var i = 0; i < document.getElementsByName(tagName).length; i++) {           
                  output.innerHTML += document.getElementsByName(tagName)[i].outerHTML;
        }
         }
function getByTagName(tagName) {        output.value = "";
        for (var i = 0; i < document.getElementsByTagName(tagName).length; i++) {
                 output.innerHTML += document.getElementsByTagName(tagName)[i].outerHTML;
            
         
        }
    }
</script>苦恼啊，还有getElementsByName()和getElementsByTagName()这两个方法到底有什么区别啊

Answer 1

getElementsByName()返回的是具有相同name属性的元素集合。return的是一个collection。
getElementsByTagName()返回的是一组相同tag的元素集合。

Answer 2

因为你的循环体中每一次都对dom进行了操作 尤其还操作了innerHTML
优化后：
function getByName(tagName) //根据元素的name属性找
{
output.value = '';
var comps = document.getElementsByName(tagName);
var arr = [];
for (var i = 0, len = comps.length; i < len; i++)
{
arr.push(comps[i].outerHTML); }
output.innerHTML = arr.join("");
}
function getByTagName(tagName) //根据元素找 传值例如'input' 查找所有input标签
{
output.value = "";
var comps = document.getElementsByTagName(tagName);
var arr = [];
for (var i = 0, len = comps.length; i < len; i++)
{
arr.push(comps[i].outerHTML);
}
output.innerHTML = arr.join("");
}

Answer 3

其实两个函数可以合并为一个function setValByTagName(tagName, isTagName) // 根据元素的name属性找
{
// 增加参数控制 传入的tagName是否是标签类型
output.value = '';
var comps = isTagName ? document.getElementsByTagName(tagName) : document.getElementsByName(tagName);
var arr = [];
for (var i = 0, len = comps.length; i < len; i++)
{
arr.push(comps[i].outerHTML);
}
output.innerHTML = arr.join("");
}
调用：
<button onclick="setValByTagName('d2',false)">getElementByName</button><br />
<button onclick="setValByTagName('p',true)">getElementsByTagName("p")</button>