问题描述
我试图理解 HTML 中的命名空间非常简单。
使用这两个命令有什么区别。为什么应该使用 createElementNS 而不是 createElement？
const a = document.createElementNS("http://www.w3.org/2000/svg","svg")
const b = document.createElement("svg")
资源：
- https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI
- https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
- https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
解决方法
命名空间使不同类型的 XML¹ 可以具有不同含义的相同标签。以下是 Namespaces crash course on MDN 的摘录：
W3C 的一个长期目标是让不同类型的基于 XML 的内容能够在同一个 XML 文件中混合在一起。例如，SVG 和 MathML 可能会直接合并到基于 XHTML 的科学文档中。能够混合这样的内容类型有很多好处，但也需要解决一个非常现实的问题。
自然地，每个 XML 方言都定义了在其规范中描述的标记元素名称的含义。在单个 XML 文档中混合来自不同 XML 方言的内容的问题在于，一种方言定义的元素可能与另一种方言定义的元素具有相同的名称。例如，XHTML 和 SVG 都有一个元素。用户代理应该如何区分两者？实际上，用户代理如何判断 XML 内容何时是它所知道的，而不仅仅是包含它未知的任意元素名称的无意义 XML 文件？
在您的具体示例中，不同之处在于 createElement("svg") 创建了一个 HTML 元素，其标签名称为 svg（它不存在，没有 具有该标签名称的 HTML 元素）。但是 createElementNS("http://www.w3.org/2000/svg","svg") 创建了一个 SVG 元素，其标签名称为 svg（确实存在）。
这很重要，因为 SVG 元素已经定义了行为和各种方法，以及您可能想要的。尝试将其创建为 HTML 元素时，您不会获得这些行为和方法：
const a = document.createElementNS("http://www.w3.org/2000/svg","svg");
const b = document.createElement("svg");
console.log("a instanceof SVGSVGElement?",a instanceof SVGSVGElement); // a instanceof SVGSVGElement? true
console.log("b instanceof SVGSVGElement?",b instanceof SVGSVGElement); // b instanceof SVGSVGElement? false
console.log("typeof a.currentScale:",typeof a.currentScale); // typeof a.currentScale: number
console.log("typeof b.currentScale:",typeof b.currentScale); // typeof b.currentScale: undefined¹ HTML 不是 XML，但有时会嵌入 XML（例如：SVG）。 （有 XHTML，它是 XML，但请注意 XHTML 不是 HTML。）