createElement 与 createElementNS

Posted 2023-02-23

【中文标题】createElement 与 createElementNS

【英文标题】：createElement vs. createElementNS

【发布时间】：2011-12-31 16:10:15

【问题描述】：

这两者之间的真正区别是什么？我的意思是真正的、本质的区别。 普通createElement的未来会怎样？

Svg 是 xml，而不是 html。我明白了。所以我们使用createElementNS(ns_string, 'svg') 然后setAttributeNS(null,,)。为什么？ 为什么不setAttributeNS('my_ns',,)？

为什么ns_string 必须是http://www.w3.org/2000/svg 而不是一些随机字符串？如果只有一个命名空间，命名空间的用途是什么？

ns 在常规 html 中的用途是什么？我是否应该在现有代码中将所有createElement 实例更改为createElementNS？

我正在阅读DOM-Level-2 规范。但我还是很疑惑。

【问题讨论】：

如果 SVG 也有一个，比如说，a 元素，为什么我们会假设它与熟悉的具有相同标签名称的 HTML 锚元素具有相同的作用？也许，在 SVG 中，它会完全指代其他东西，更适合 SVG 的本质？那么您需要做的就是问问自己——如果您在脚本中使用document.createElement("a")，您会得到哪个a 元素？看，没有命名空间，元素的名称完全是模棱两可的。

【参考方案1】：

要了解命名空间试图解决的问题，请考虑文件扩展名。 3 个字母的文件扩展名在描述文件内容方面做得非常糟糕。它们模棱两可，不携带版本信息。 XML 命名空间使用更大空间的字符串 URI 来解决相同的问题，并使用短前缀，以便您可以在同一个文档中简洁地混合多种 XML。

如果只有一个命名空间，命名空间的作用是什么？

有许多命名空间用于识别不同种类的 XML，以及这些种类的不同版本。

SVG 和 MathML 是两种 XML，每种都有自己的可以嵌入 HTML5 的命名空间，并且它们经常使用另一个 XML 命名空间 XLink。许多其他具有相应命名空间的 XML 模式用于在客户端和服务器之间传递消息以及用于数据存储。

XHTML 试图将 HTML 表达为有效的 XML。它有自己的命名空间。

所以我们使用 createElementNS(ns_string, 'svg') 然后 setAttributeNS(null,,)。为什么？为什么不 setAttributeNS('my_ns',,)???

在将 createElementNS 与命名空间 URI 一起使用时，您可能应该尝试始终将 setAttributeNS 与命名空间 URI 一起使用。

XML 是在多个步骤中定义的。规范的第一个版本没有提及命名空间，但保留了足够的语法，以便可以通过使用前缀和特殊的xmlns 属性在没有命名空间的 XML 之上指定具有命名空间的 XML。 XML specification 说：

“XML 推荐中的命名空间 [XML 名称] 为包含冒号字符的名称分配了含义。因此，作者不应在 XML 名称中使用冒号，除非出于命名空间的目的，但 XML 处理器必须接受冒号作为名称字符。 "

XML 命名空间让 XML 处理应用程序知道它们正在处理什么，并允许多种 XML 在同一个文档中混合在一起。

为什么ns_string必须是“http://www.w3.org/2000/svg”

这包括 SVG 版本标准化的年份，即 2000 年，因此它包含有用的信息。

当与xmlns:svg 一起使用时，它还让浏览器知道svg: 前缀表示SVG，而不是XML 的其他方言。

【讨论】：

嗯，所以仅仅 是不够的。它必须有一个适当的 xml 命名空间才能成为“真正的”svg... 为什么我们不将命名空间用于常规 dom 元素？喜欢

@CoR, <svg> 对于 HTML 5 解析器来说可能就足够了，并且 XML 渲染器可以使用上下文来判断它是 SVG 根元素，但是如果您有一个正在处理的 XML 解析器对于许多不同种类的内容，应该使用命名空间。请参阅我刚刚添加到答案中的第一段。

@CoR，您确实对常规 DOM 元素使用命名空间，但仅当它们不在默认命名空间中时。在 XHTML 文件中，默认命名空间是隐式的，而在 SVG 或 XML 文件中则不是。

@zzzzBov，我同意。我对“在 XHTML 文件中……，[但]在 SVG 或 XML 文件中”感到困惑，因为 SVG 和 XHTML 是 XML。出于同样的原因，我会发现“猫是毛茸茸的，但青蛙和动物不是”令人困惑。

@MikeSamuel，说得好。让我修改一下：“SVG 或 任何其他 XML 文件”我的意思是泛型中的 XML，因为文件名将以 .xml 结尾。