IE中getElementsByTagName无法获取元素BUG

如下

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>IE中getElementsByTagName无法获取元素BUG</title>
</head>
<body>
<input type="button" id="test" value="TEST">
<script>
    var html= '<input type="checkbox">';
    var div = document.createElement("div");
    div.innerHTML = html;
     
    var a = div.getElementsByTagName("input"); // 语句1
    document.body.appendChild(div); // 语句2
     
    document.getElementById("test").onclick = function() {
        alert(a[0]);
    };
</script>
</body>
</html>

点击Input[id=test]

IE6/7 ：抛异常

IE8/9 ：弹出 undefined

Firefox/Safari/Chrome/Opera ：弹出 [object HTMLInputElement]

当把语句1 和语句2 位置调换，则不重现。

当把 div.getElementsByTagName 换成 div.childNodes[0] 或 div.children[0] 时，亦不重现。

初步判断是IE中 getElementsByTagName 的实现问题，在 MSDN 找到一段：

This problem occurs because the GetElementsByTagName method returns an XmlNodeList collection that registers listeners on the NodeInserted and the NodeRemoved events. For example, when you call the GetElementsByTagName method ten times, the NodeInserted and the NodeRemoved events have ten listeners. Therefore, when you call the GetElementsByTagName method multiple times, the process of inserting and removing nodes is delayed.