如何使用`querySelector`来选择标签带有冒号的元素？

Question

例如，我们有这个 XML：

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

那么，如何在 JavaScript 中使用

foo:bar

选择标签为

querySelector

的节点呢？

一个天真的做法是这样的：

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

。

也许相关：

• https://bugzilla.mozilla.org/show_bug.cgi?id=883044
• 使用“:”（冒号）按属性选择元素 （这个讲的是id里有冒号的时候）
• 使用纯 JavaScript 选择带冒号的 XML 元素 （答案建议

  getElementsByTagName

  ，但我想用

  querySelector

  来获得更大的灵活性）

Answer 1

您的示例中有一个错误。第一行必须是 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');

document.querySelector 函数不提供对命名空间的支持。

您可以使用非命名空间选择器来查找

content

元素。

const node = xml.querySelector('content');