XMLHttpRequest responseText与firstChild.nodeValue对比异常问题

核心原因 #

你遇到的问题本质是服务器返回的响应文本包含隐形空白字符，而DOM文本节点的内容是经过浏览器处理后的纯净文本，二者直接对比自然不相等：

• 服务器返回的responseText可能带有换行符、制表符、首尾空格这类肉眼不可见的字符（比如后端代码输出时的换行、多余空格），XMLHttpRequest会完整读取这些字符。
• DOM元素的firstChild.nodeValue是浏览器渲染时处理后的文本，会自动忽略无意义的冗余空白（比如连续空格、换行），所以不会保留这些隐形字符。
• 当你把responseText赋值给临时元素时，浏览器会像处理普通DOM一样清理这些空白，此时临时元素的nodeValue就和目标元素的文本节点格式一致，对比自然相等。

解决方案 #

方案1：清理响应文本的空白后再对比 #

直接对responseText做空白处理，去除首尾空白并合并内部多余空格：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // 清理响应文本：去除首尾空白，合并内部连续空白为单个空格
       const cleanedResponse = this.responseText.trim().replace(/\s+/g, ' ');
       // 获取目标元素的文本并做同样清理
       const targetText = document.getElementById("fruit_name").firstChild.nodeValue.trim().replace(/\s+/g, ' ');
       
       if(targetText !== cleanedResponse) {
            document.getElementById("fruit_name").firstChild.nodeValue = cleanedResponse;
       }
    }
};
xhttp.open("GET", "~~URL I GET DATA FROM~~", true);
xhttp.send();

方案2：用临时元素中转响应文本 #

利用浏览器的DOM处理机制自动清理空白，和你发现的可行方法一致：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       const tempDiv = document.createElement('div');
       // 将响应文本赋值给临时元素的文本节点
       tempDiv.firstChild.nodeValue = this.responseText;
       // 此时临时元素的nodeValue已被浏览器清理了冗余空白
       const cleanedResponse = tempDiv.firstChild.nodeValue;
       
       const targetText = document.getElementById("fruit_name").firstChild.nodeValue;
       
       if(targetText !== cleanedResponse) {
            document.getElementById("fruit_name").firstChild.nodeValue = cleanedResponse;
       }
    }
};
xhttp.open("GET", "~~URL I GET DATA FROM~~", true);
xhttp.send();

方案3：使用textContent替代firstChild.nodeValue #

textContent会直接返回元素内的所有文本内容，处理逻辑更统一，还能避免元素为空时firstChild为null的报错：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       const cleanedResponse = this.responseText.trim().replace(/\s+/g, ' ');
       const targetText = document.getElementById("fruit_name").textContent.trim().replace(/\s+/g, ' ');
       
       if(targetText !== cleanedResponse) {
            document.getElementById("fruit_name").textContent = cleanedResponse;
       }
    }
};
xhttp.open("GET", "~~URL I GET DATA FROM~~", true);
xhttp.send();

内容的提问来源于stack exchange，提问作者G-J