javascript - 带前缀的 createElementNS 和不带前缀的 createElementNS 有什么区别？

Question

在链接到 XHTML 页面的 JS 中，我使用 createElementNS 创建新元素，如下所示:

const NS = 'http://my.site/xmlns';
const el1 = document.createElementNS(NS, 'custom');
const el2 = document.createElementNS(NS, 'p:custom');

我无法理解在第二个参数中使用 namespace 前缀创建的元素与没有它创建的元素之间有什么区别。例如，这些 CSS 规则对两个元素具有相同的效果:

@namespace p url('http://my.site/xmlns');
p|custom { background: yellow; }

接下来，调用 document.getElementsByTagNameNS(NS, 'custom') 返回一个包含 两个 元素的 HtmlCollection，而 document .getElementsByTagNameNS(NS, 'p:custom') 返回一个空的 HtmlCollection，这对我来说似乎很奇怪。

那么创建带有命名空间前缀和不带有命名空间前缀的元素有什么区别？

Answer 1

document.createElementNS()期望第二个参数是限定的标记名称。 p:custom 是限定标签名称，因此 document.createElementNS(NS, 'p:custom') 更正确；我怀疑 document.createElementNS(NS, 'custom') 起作用的原因是由于遗留原因。

document.getElementsByTagNameNS()另一方面期望第二个参数是本地标记名称。 custom 是本地标记名称。 (如果custom没有命名空间，那么它也是它的限定名称。)

由于您的元素是命名空间的，并且它们的限定名称是 p:custom，因此它们的本地名称是 custom，因此 document.getElementsByTagNameNS(NS, ' p:custom') 不返回任何内容，因为 p:custom 不是它们的本地名称。