查询选择器可以处理命名空间,但它变得很棘手,因为
CSS选择器中指定命名空间的语法与html不同;
querySelector API 没有任何方法可以将命名空间前缀(如 xlink)分配给实际命名空间(如 "http://www.w3.org/1999/xlink")。
首先,the relevant part of the CSS specs 允许您指定 no 命名空间(默认)、特定命名空间或 any 命名空间:
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }
第一条规则将仅匹配“http://www.example.com”命名空间中属性为“att”且值为“val”的元素。
第二条规则将只匹配具有att 属性的元素,而不管该属性的命名空间(包括没有命名空间)。
最后两条规则是等价的,只会匹配名称空间中具有属性att 且属性不的元素。
看这个小提琴,注意填充样式(默认、悬停和活动):
https://jsfiddle.net/eg43L/
Selectors API 采用 CSS 选择器语法,但没有等效于用于定义命名空间的 @namespace 规则。结果,selectors with namespaces are not valid but the wildcard namespace token is valid:
如果选择器组包含需要解析的命名空间前缀,则实现必须引发 SYNTAX_ERR 异常([DOM-LEVEL-3-CORE],第 1.4 节)。
本规范不支持解析任意命名空间前缀。但是,可能会考虑在本规范的未来版本中包含对命名空间前缀解析机制的支持。
如果命名空间组件既不是空的(例如|div)代表空命名空间,也不是星号(例如*|div)代表任何命名空间,则需要解析命名空间前缀。 由于不需要解析星号或空命名空间前缀,因此在选择器中支持命名空间语法的实现必须支持这些。
(加粗)
再次查看the fiddle,这次注意控制台输出。命令document.querySelector('[*|href="#url"]') 返回你想要的元素。
最后一个警告:MDN 告诉我 IE8- 不支持 CSS 命名空间,所以这可能对他们不起作用。
2015-01-31 更新:
正如@Netsi1964 在 cmets 中指出的那样,这不适用于 HTML 5 文档中的自定义命名空间属性,因为 HTML 不支持 XML 命名空间。 (它适用于独立的 SVG 或其他 XML 文档,包括 XHTML。)
当 HTML5 解析器遇到像 data:myAttribute="value" 这样的属性时,它会将其视为属性名称的单个字符串,包括 :。为了让事情更混乱,它会自动将字符串小写。
要让querySelector 选择这些属性,您必须将data: 作为属性字符串的一部分。但是,由于 : 在 CSS 选择器中具有特殊含义,因此您需要使用 \ 字符对其进行转义。而且由于您需要 \ 作为选择器的一部分通过,您需要在 JavaScript 中转义 it。
因此,成功的调用如下所示:
document.querySelector('[data\\:myattribute="value"]');
为了使事情更合乎逻辑,我建议您对属性名称使用全部小写,因为 HTML 5 解析器无论如何都会转换它们。 Blink/Webkit 浏览器会自动将您传递给querySelector 的选择器小写,但这实际上是一个非常有问题的错误(这意味着您永远不能选择带有混合大小写标签名称的 SVG 元素)。
但同样的解决方案是否适用于xlink:href?不! HTML 5 解析器识别 SVG 标记中的 xlink:href,并将其正确解析为命名空间属性。
Here's the updated fiddle with additional tests。同样,查看控制台输出以查看结果。在 Chrome 40、Firefox 35 和 IE 11 中测试;唯一不同的行为是 Chrome 匹配大小写混合选择器。