面试题：客户端解析XML并更新页面控件（禁用jQuery）

我来帮你搞定这个XML解析的问题！你的思路方向没问题，但踩了两个常见的XML解析坑，导致代码执行失败。

问题分析 #

你的代码主要有两个核心问题：

1. childNodes包含空白文本节点：XML里的换行、空格会被DOMParser解析成文本节点，所以xmlDoc.getElementsByTagName("cv")[0].childNodes[0]其实是空白文本，不是<FirstName>节点，自然拿不到正确的内容。
2. 文本框值获取方式错误：ASP.NET的TextBox渲染后是<input>或<textarea>，获取其内容应该用value属性，而不是textContent。

另外你提到调试跳转到jQuery文件，大概率是页面里引入了jQuery但代码没用到，这个和当前解析错误无关，不用在意它。

修正后的代码 #

下面是修复后的ParseXml函数，还加入了基础的错误处理，避免XML格式错误导致页面崩溃：

function ParseXml() {
    // 获取文本框中的XML内容
    var xmlText = document.getElementById('<%= TextBox1.ClientID %>').value;
    if (!xmlText.trim()) {
        alert("请输入XML内容");
        return false;
    }

    // 解析XML
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xmlText, "text/xml");

    // 检查XML解析是否出错
    var parseError = xmlDoc.querySelector("parsererror");
    if (parseError) {
        alert("XML格式错误，请检查输入");
        return false;
    }

    // 直接通过节点名获取对应元素的内容
    var firstName = xmlDoc.getElementsByTagName("FirstName")[0].textContent;
    var lastName = xmlDoc.getElementsByTagName("LastName")[0].textContent;
    var jobs = xmlDoc.getElementsByTagName("Jobs")[0].textContent;

    // 填充到对应的Label中
    document.getElementById('<%= FirstName.ClientID %>').textContent = firstName;
    document.getElementById('<%= LastName.ClientID %>').textContent = lastName;
    document.getElementById('<%= Jobs.ClientID %>').textContent = jobs;

    return true;
}

额外优化：实现无需知晓XML结构的自动填充 #

如果想达到你说的不用硬编码XML节点名的理想状态，可以遍历XML子节点，根据节点名自动匹配页面上的Label：

function ParseXml() {
    var xmlText = document.getElementById('<%= TextBox1.ClientID %>').value;
    if (!xmlText.trim()) {
        alert("请输入XML内容");
        return false;
    }

    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xmlText, "text/xml");
    var parseError = xmlDoc.querySelector("parsererror");
    if (parseError) {
        alert("XML格式错误，请检查输入");
        return false;
    }

    // 获取<cv>下的所有子元素（自动排除空白文本节点）
    var cvNodes = xmlDoc.getElementsByTagName("cv")[0].children;
    for (var i = 0; i < cvNodes.length; i++) {
        var node = cvNodes[i];
        // 匹配ASP.NET生成的Label ID（带页面前缀）
        var label = document.getElementById('<%= Page.ClientID %>_' + node.nodeName);
        if (label) {
            label.textContent = node.textContent;
        }
    }

    return true;
}

这个版本会自动遍历<cv>下的所有子节点，只要页面上的Label ID和XML节点名一致，就能自动填充内容，后续新增XML节点也不用修改JS代码。

内容的提问来源于stack exchange，提问作者Maverick Meerkat