如何用JavaScript获取带指定属性值的XML节点内容？

你有一份简化后的XML文件，其中包含带Index属性和无属性的Attendant节点；同时有用于加载XML的JavaScript函数loadXMLDoc。目前在WebView2环境中，你通过索引偏移（因首个Attendant无属性需+1）获取对应节点内容，希望能直接通过Index属性精准获取目标值。

相关代码 #

XML文件（LabelsInfo.XML）

<?xml version="1.0" encoding="UTF-8"?>
<Labels Version="24100002">
    <Attendant>Attendant</Attendant>
    <Attendant Index="1">Car Park Attendant</Attendant>
    <Attendant Index="2">Entrance Attendant</Attendant>
    <Attendant Index="3">Auditorium Attendant</Attendant>
    <Attendant Index="4">Attendant 4</Attendant>
</Labels>

XML加载函数

function loadXMLDoc(filename) {
    return fetch(filename)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
}

当前使用的代码片段

// 异步获取XML和XSL文件
var [xsl, xml, labelsInfo] = await Promise.all([
    loadXMLDoc('DutyHistory-transform.xsl'),
    loadXMLDoc('DutyAssignHistory.xml'),
    loadXMLDoc('LabelsInfo.XML')
]);

// 由于LabelsInfo文件中存在无属性的"Attendant"标签，索引需+1
xsltProcessor.setParameter(null, 'index13', labelsInfo.documentElement.getElementsByTagName('Attendant')[1].textContent.trim());
xsltProcessor.setParameter(null, 'index14', labelsInfo.documentElement.getElementsByTagName('Attendant')[2].textContent.trim());
xsltProcessor.setParameter(null, 'index15', labelsInfo.documentElement.getElementsByTagName('Attendant')[3].textContent.trim());

解决方案：用XPath直接按Index属性查询 #

WebView2基于Chromium内核，完全支持DOM的XPath查询API，你可以直接通过XPath表达式定位带指定Index属性的Attendant节点，无需依赖索引位置。

修改后的代码示例：

// 异步获取文件部分保持不变
var [xsl, xml, labelsInfo] = await Promise.all([
    loadXMLDoc('DutyHistory-transform.xsl'),
    loadXMLDoc('DutyAssignHistory.xml'),
    loadXMLDoc('LabelsInfo.XML')
]);

// 定义工具函数，根据Index值获取Attendant文本内容
function getAttendantByIndex(xmlDoc, indexValue) {
    const targetNode = xmlDoc.evaluate(
        `//Attendant[@Index="${indexValue}"]`,
        xmlDoc,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    ).singleNodeValue;
    return targetNode ? targetNode.textContent.trim() : '';
}

// 直接通过Index属性设置参数
xsltProcessor.setParameter(null, 'index13', getAttendantByIndex(labelsInfo, '1'));
xsltProcessor.setParameter(null, 'index14', getAttendantByIndex(labelsInfo, '2'));
xsltProcessor.setParameter(null, 'index15', getAttendantByIndex(labelsInfo, '3'));

说明 #

• XPath表达式//Attendant[@Index="1"]会全局查找所有带有Index="1"属性的Attendant节点，FIRST_ORDERED_NODE_TYPE确保获取第一个匹配的节点（你的XML中每个Index值唯一，无需担心重复）。
• 这种方法无需关心无属性的第一个Attendant节点位置，即使XML结构后续调整，只要Index属性值正确，就能精准获取目标内容。
• WebView2环境原生支持该API，无需额外配置或依赖。

内容的提问来源于stack exchange，提问作者Andrew Truckle