Question

我不明白createElement（...）和createElementNS（'http://www.w3.org/1999/xhtml'，...）之间的区别

您可以尝试以下代码：

var element1 = document.createElement('form:form');
var element2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'form:form');

console.log(element1.tagName); // FORM:FORM
console.log(element1.localName); // form:form

console.log(element2.tagName); // FORM:FORM
console.log(element2.localName); // form

我当时想这将是相同的结果，但根本不会。有人知道为什么吗？

Answer 1

createElement和createElementNS之间的区别在于，您可以在createElementNS中指定名称空间URI，而createElement则不允许。

当需要从JS创建SVG时，可以使用

createElementNS。 AS SVG需要名称空间URI。您可以从此处检查有效的名称空间： https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#Important_Namespace_URIs

如果要使用HTML创建元素，则可以使用createElement，因为其中不需要namespace，但是如果要使用XHTML创建HTML，则需要使用createElementNS，因为XHTML需要namespace。

Answer 2

标记中的命名空间用namespace:element语法标记（或namespace:attribute标记） DOM方法createElementNS和setAttributeNS不需要此语法即可在给定名称空间中创建元素，但是由于标记语法允许，因此它们仍将识别并忽略它。

这样，当您对文档进行字符串化处理时，就可以拥有

<html xmlns:form="http://www.w3.org/1999/xhtml">
  <form:form></form>
</html>

代替一些难以阅读的内容

<html xmlns:NS0="http://www.w3.org/1999/xhtml">
  <NS0:form></form>
</html>

createElement和setAttribute方法将无法识别此语法，并会真正创建一个<xmlns:form:form></form>元素。

createElement（...）和createElementNS（'http://www.w3.org/1999/xhtml'，...）之间有什么区别

2 个答案: