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

Question

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

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

我不明白在第二个参数中使用命名空间前缀创建的元素与没有它创建的元素之间有什么区别。例如，这些 CSS 规则对 both 元素具有相同的效果：

@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 不是它们的本地名称。