在基于HTML5的前端项目里，通过JavaScript处理服务端返回的XML数据是很常见的需求。不同浏览器内置的XML解析引擎在实现细节上存在分歧，其中Safari的表现尤其容易让开发者踩坑。当代码在Chrome下运行正常时，移植到Safari往往会发现某些节点取不到、属性值为空或者遍历结果数量不对。
Safari解析XML的核心差异
Safari使用的WebKit引擎在解析XML时严格遵循W3C的DOM规范，特别是在命名空间处理上比其他浏览器更苛刻。当XML文档带有默认命名空间（例如<root xmlns="http://ippipp.com/ns">）时，Safari不会像Chrome那样把元素归类为无命名空间节点，而是将其归属到对应的命名空间URI下。如果开发者调用getElementsByTagName并传入不带命名空间前缀的标签名，Safari会返回空的NodeList，而Chrome通常仍能匹配到元素。
另一个显著差异是空白文本节点的处理。在Chrome和Firefox中，解析器有时会自动忽略元素间的纯空白换行，但Safari会将其作为text类型节点保留在childNodes列表中。这就导致在用下标访问子节点或遍历firstChild时，Safari可能取到的是换行文本而非真实元素，从而引发逻辑错误。此外，Safari对textContent的返回在部分旧版本中会遗漏CDATA段内容，需要改用nodeValue读取。
命名空间导致的获取失败示例
下面这段XML在Safari中如果不用命名空间方法就无法拿到item节点：
<?xml version="1.0" encoding="UTF-8"?> <list xmlns="http://ipipp.com/xmlns"> <item id="1">测试一</item> <item id="2">测试二</item> </list>
对应的JavaScript读取代码在Safari中必须区分处理：
// 解析XML字符串
function parseXML(str) {
var parser = new DOMParser();
return parser.parseFromString(str, 'text/xml');
}
var xmlDoc = parseXML(xmlString);
// Chrome下可能正常，Safari下返回空
var badItems = xmlDoc.getElementsByTagName('item');
console.log(badItems.length); // Safari输出0
// Safari兼容写法
var goodItems = xmlDoc.getElementsByTagNameNS('http://ipipp.com/xmlns', 'item');
console.log(goodItems.length); // Safari输出2
通用的Safari节点获取兼容方案
为了让代码在Safari、Chrome、Firefox中都能稳定获取XML节点，推荐封装一个统一的节点查询函数。该函数优先检测文档是否支持getElementsByTagNameNS，并尝试使用命名空间获取；若失败则回退到普通标签名查询。同时，在遍历子节点时主动过滤掉nodeType不为1（元素节点）的节点，规避Safari保留空白文本节点的问题。
这种方案不需要引入任何第三方XML库，纯原生API即可实现。它的优势是体积小、性能好，且能覆盖绝大多数业务场景下的XML数据提取。缺点是如果XML同时存在多个命名空间且标签名重复，需要调用方显式传入目标URI。不过实际项目中服务端返回的XML结构通常可控，因此影响有限。
兼容封装代码实现
以下工具函数可以同时处理带命名空间与不带命名空间的场景，并过滤无效节点：
/**
* 跨浏览器获取XML子元素列表
* @param {Document} doc 解析后的XML文档
* @param {string} tag 标签名
* @param {string} ns 命名空间URI，可空
* @return {Array} 元素节点数组
*/
function getXmlElements(doc, tag, ns) {
var list = [];
var nodes = null;
if (ns && doc.getElementsByTagNameNS) {
nodes = doc.getElementsByTagNameNS(ns, tag);
} else {
nodes = doc.getElementsByTagName(tag);
}
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType === 1) {
list.push(nodes[i]);
}
}
return list;
}
/**
* 获取元素的所有元素类型子节点，过滤Safari空白文本
* @param {Element} el XML元素
* @return {Array} 子元素数组
*/
function getElementChildren(el) {
var children = [];
var child = el.firstChild;
while (child) {
if (child.nodeType === 1) {
children.push(child);
}
child = child.nextSibling;
}
return children;
}
使用上述函数，无论在什么浏览器中，都能以一致的方式拿到数据：
var items = getXmlElements(xmlDoc, 'item', 'http://ipipp.com/xmlns');
items.forEach(function(node) {
var id = node.getAttribute('id');
var text = node.textContent || node.firstChild.nodeValue;
console.log(id, text);
});
属性读取与CDATA兼容处理
在Safari中读取XML节点属性一般用getAttribute即可，但如果属性带有命名空间（如xsi:type），则需要用getAttributeNS。此外，当节点内容写在CDATA块里时，Safari旧版本可能不会将其合并进textContent，此时应判断node.firstChild是否存在并读取其nodeValue。下面给出一段针对CDATA的兼容读取写法。
这种细节处理在对接老旧接口或第三方XML服务时非常关键。虽然现代Safari版本已修复部分CDATA问题，但企业内仍可能存在低版本iOS设备，提前做兼容能减少线上故障。配合前面封装的节点获取函数，基本可以做到一套代码全浏览器通用。
function getNodeText(node) {
if (!node) return '';
// 优先textContent
if (typeof node.textContent === 'string' && node.textContent) {
return node.textContent;
}
// Safari旧版CDATA回退
if (node.firstChild && node.firstChild.nodeValue) {
return node.firstChild.nodeValue;
}
return '';
}
总结与最佳实践
面对Safari解析XML的差异，核心思路是不要依赖浏览器的隐性容错，而是用显式命名空间API和节点类型过滤来编写防御性代码。在项目中建议统一通过封装函数操作XML，避免业务代码里散落各种if (Safari)判断。服务端若可控，尽量返回不带默认命名空间的XML，或从接口约定上明确命名空间URI，能进一步降低前端兼容成本。
最后提醒，使用DOMParser解析字符串时，若格式错误Safari会在文档内插入parsererror节点，可通过检测getElementsByTagName('parsererror')来判断解析是否成功，这也是提升健壮性的重要一环。