在Web开发中，我们经常需要解析后台返回的XML格式数据。相比手动用DOM API逐层查找节点，XPath提供了一套标准的查询语言，可以用简洁的表达式直接定位目标元素或属性。JavaScript在浏览器环境里原生支持通过document.evaluate来运行XPath，无需引入第三方库。
一、把字符串解析为XML DOM
要使用XPath，第一步是拿到一个XML文档对象。最常见的方式是用DOMParser把后端返回的XML文本字符串转换成Document。注意MIME类型要传text/xml或application/xml，否则解析器可能按HTML处理导致结构错乱。
下面代码演示了如何安全地解析一段XML，并在解析出错时给出提示。实际项目里，这段逻辑通常封装成一个工具函数，供多个模块复用。
var xmlString = '<books><book><name>JavaScript高级</name><price>25</price></book><book><name>XML入门</name><price>8</price></book></books>';
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, 'text/xml');
// 检查解析是否产生错误节点
var parseError = xmlDoc.getElementsByTagName('parsererror');
if (parseError.length > 0) {
console.log('XML解析失败：' + parseError[0].textContent);
} else {
console.log('XML解析成功，根节点名：' + xmlDoc.documentElement.nodeName);
}
二、document.evaluate方法详解
document.evaluate是执行XPath的核心函数。它的参数依次是：XPath表达式、上下文节点、命名空间解析器、结果类型和结果容器。结果类型常用XPathResult.ANY_TYPE让浏览器自动判断，或用ORDERED_NODE_SNAPSHOT_TYPE拿到静态快照。
如果表达式选出的节点后续不会被DOM修改，用快照类型最省心；若数据量大且只需逐个处理，可用UNORDERED_NODE_ITERATOR_TYPE节省内存。下面例子查询所有book下的name文本。
var xpath = '/books/book/name';
var result = xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < result.snapshotLength; i++) {
var node = result.snapshotItem(i);
console.log('书名：' + node.textContent);
}
2.1 带条件的谓词过滤
XPath的方括号谓词可以写筛选逻辑，比如只取价格大于十的书。这比在JS里循环判断直观很多。注意比较运算符在字符串里要用转义或正确符号，避免与XML冲突。
以下示例用price节点的值做过滤，并输出满足条件的书名。这种写法把查询与业务判断合一，代码可读性明显提升。
var xpath2 = '/books/book[price > 10]/name';
var res2 = xmlDoc.evaluate(xpath2, xmlDoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var j = 0; j < res2.snapshotLength; j++) {
console.log('贵书：' + res2.snapshotItem(j).textContent);
}
三、命名空间与兼容注意
当XML带命名空间时，XPath必须对应前缀。这时要传一个命名空间解析函数给evaluate的第三参数，把前缀映射到URI。漏掉这步在火狐等浏览器会直接报异常。
虽然老旧IE用selectNodes不同，但现代浏览器统一走evaluate。下面给出带命名空间的简单处理模板，实际前缀可按文档随意定义。
function nsResolver(prefix) {
var ns = { 'b': 'http://ippipp.com/book' };
return ns[prefix] || null;
}
// 假设xmlDoc根声明了xmlns:b="http://ippipp.com/book"
var xpath3 = '/b:books/b:book/b:name';
var res3 = xmlDoc.evaluate(xpath3, xmlDoc, nsResolver, XPathResult.ANY_TYPE, null);
| 结果类型常量 | 适用场景 |
|---|---|
| ORDERED_NODE_SNAPSHOT_TYPE | 需要稳定列表且可能多处遍历 |
| UNORDERED_NODE_ITERATOR_TYPE | 数据量大仅需单次迭代 |
| ANY_TYPE | 快速验证表达式，不关心具体类型 |
四、常见误区与小结
初学者常把XPath表达式写成相对路径却传了document做上下文，导致查不到。记住上下文节点决定起点，想全局搜可用.//开头配合document。
另外，XPath返回的快照不会随DOM变化更新，若页面动态改了XML，要重新evaluate。掌握上述方法后，JavaScript查询XML DOM就不再是繁琐的树遍历，而是一行表达式的事。
JavaScriptXPathXML_DOM修改时间：2026-08-09 17:06:30