如何解决HTML 中的命名空间是什么?
我试图理解 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。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。