如何使用querySelector选择标签含冒号的XML元素？

问题场景 #

例如，我们有如下XML：

<?xml version="1.0" encoding="UTF-8"?>
<xml xmlns:media="http://search.yahoo.com/mrss/">
<media:content></media:content>
</xml>

想在JavaScript中用querySelector选择类似foo:bar这种带命名空间的标签，常规写法尝试转义冒号后返回null：

const xml = new DOMParser().parseFromString(`
  <?xml version="1.0" encoding="UTF-8"?>
  <xml xmlns:media="http://search.yahoo.com/mrss/">
    <media:content></media:content>
  </xml>
`, 'text/xml');
const node = xml.querySelector('media\\:content');
// node 结果为 null

解决方法 #

直接转义冒号无效的核心原因：CSS选择器中的冒号默认对应伪类/伪元素，转义后会被当成标签名的一部分，而非XML的命名空间前缀。要正确选择带命名空间的元素，有两种可靠方式：

方式1：通过命名空间URI和本地名匹配（兼容性最优） #

利用CSS属性选择器结合namespace-uri()和local-name()伪函数，直接匹配元素的命名空间和标签名，不依赖前缀：

const xml = new DOMParser().parseFromString(`
  <?xml version="1.0" encoding="UTF-8"?>
  <xml xmlns:media="http://search.yahoo.com/mrss/">
    <media:content></media:content>
  </xml>
`, 'text/xml');

const node = xml.querySelector('*[local-name()="content" and namespace-uri()="http://search.yahoo.com/mrss/"]');
// 可正确获取到 <media:content> 元素

方式2：使用CSS命名空间选择器（需现代环境支持） #

如果运行环境支持CSS命名空间语法，可直接用|分隔命名空间前缀和标签名（前提是XML中已注册对应前缀）：

const xml = new DOMParser().parseFromString(`
  <?xml version="1.0" encoding="UTF-8"?>
  <xml xmlns:media="http://search.yahoo.com/mrss/">
    <media:content></media:content>
  </xml>
`, 'text/xml');

const node = xml.querySelector('media|content');
// 现代浏览器可正确解析该选择器

补充说明 #

• 方式1的兼容性覆盖绝大多数浏览器，且不受XML命名空间前缀变化的影响，即使前缀从media改成mrss，只要URI不变，选择器依然有效。
• 方式2的|语法是CSS命名空间标准的一部分，但部分旧版浏览器或受限环境可能不支持，使用前需确认环境兼容性。

内容的提问来源于stack exchange，提问作者Ulysses Zhan