在使用JavaScript操作时，DOM元素会消失

Question

我有一个XML文件，我们称它为example.xml，下面是内容。

<?xml version='1.0' encoding='utf-8'?>
<document id="id1">
  <elemone id="id2"></elemone>
  <elemtwo id="id3"></elemtwo>
</document>

我使用JavaScript中的XmlHTTPRequest接口来获取这个文件 Dev Tools对请求的检查与内容相吻合

然后，我把 responseXML 属性到处理函数。

var xhr = new XMLHttpRequest();

xhr.addEventListener("load", function(e) {

var resp = e.target
if (resp.status == 200 &&
        resp.responseXML != null && resp.responseXML.getElementsByTagName('document')) { // should have [0] at the end
                    xhrProcess(resp.responseXML);       
    }
}, false);
xhr.open("GET", "http://localhost:8080/example.xml");
xhr.send();
// EDIT START
xhr.open("GET", "http://localhost:8080/example.xml");
xhr.send();
// EDIT END

经过解析，出现了一个奇怪的事情。

var xhrProcess = function(data) {
    var DOMSubElement = null;
    // EDIT START
    var DOMOtherElement = document.body;
    // EDIT END
    // 
    switch (data.firstElementChild.tagName) {
    // ...
    case 'document':
        DOMSubElement = data.firstElementChild.getElementsByTagName('elemone')[0];
    //////////////////////
    // EDIT START
    // 
    DOMOtherElement.appendChild(DOMSubElement);
    //
    // forgot to mention; apparently, that's the culprit, in
    // combination with wrong handling of DOM Events
    //////////////////////
    break;
    }
    default:
        break;
}

然而， 如有吻合之处，我得到 undefined 而在检查DOM时，我可以看到元素( <elemone> )不见了。

这是Firefox 75.0开发工具中的范围检查结果。

data: XMLDocument
​​...       
childElementCount: 1    ​​
childNodes: NodeList(1)​​​
    0: document#id1
    ...  
    childElementCount: 1    ​​​​
    childNodes: NodeList(4)   ​​​​​
        0: #text​​​​​
        1: #text​​​​​
        2: elemtwo#id3
        3: #text    ​​​​​
        length: 4

当我添加一个错别字时，比如说 .getElementsByTagName('elemoneeee');జజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజ <elemone> 回来了。

data: XMLDocument​​
...
​​childElementCount: 1​​
childNodes: NodeList(1)​​​
    0: document#id1​​​​
    childElementCount: 2​​​​
    childNodes: NodeList(5)​​​​​
         0: #text​​​​​
         1: elemone#id2
         2: #text​​​​​
         3: elemtwo#id3
         4: #text​​​​​
         length: 5

我在Firefox 75.0上测试。