Question

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

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

我无法理解在第二个参数中使用名称空间前缀创建的元素与不使用它创建的元素之间的区别。例如，这些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不是他们的本地名称

createElementNS与前缀和没有前缀有什么区别？

1 个答案: