如何在JavaScript中获取及保留(X)HTML DOM元素名称的原始大小写？

核心规则 #

• HTML命名空间（http://www.w3.org/1999/xhtml）内的元素：不管创建时用的是小写、大写还是混合大小写，nodeName和tagName都会返回全大写形式——这是HTML规范的要求，毕竟HTML标签本身就是不区分大小写的。
• 非HTML命名空间的XML元素：nodeName会严格保留创建时的原始大小写，因为XML是大小写敏感的。

你的测试代码里，用document.createElement('fooBar')创建的元素默认属于HTML命名空间，所以nodeName返回全大写的FOOBAR，完全符合规范。

如何保留标签名的原始大小写 #

要让标签名在DOM中保留原始大小写，必须跳出HTML命名空间，有两种可靠方法：

1. 创建独立的XML文档
   用new Document()生成一个纯XML文档，在这个文档里创建的元素会严格遵循大小写：

   const xmlDoc = new Document();
   const elem = xmlDoc.createElement('fooBar');
   console.log(elem.nodeName); // 输出 "fooBar"
   

2. 使用自定义命名空间创建元素
   通过document.createElementNS()指定非HTML的命名空间，这样元素会保留原始大小写：

   const customElem = document.createElementNS('http://my-custom-namespace.com', 'fooBar');
   console.log(customElem.nodeName); // 输出 "fooBar"
   

至于你提到的“声明XHTML却没生效”：如果XHTML是以text/html的Content-Type发送的，浏览器会按HTML规则解析，依然会把标签名转成大写；只有当服务器以application/xhtml+xml的MIME类型发送时，浏览器才会以XML模式解析，此时标签名会保留大小写，但这种模式下浏览器容错性极低，且部分旧浏览器不兼容。

Chrome的特殊表现说明 #

从你提供的测试结果来看，Chrome控制台显示元素时能区分HTML命名空间下的原始大小写，但nodeName依然返回全大写，这是因为：

• Chrome内部可能额外存储了元素创建时的原始标签名，但并没有暴露对应的API供开发者获取。
• 这只是控制台的调试友好优化，不属于DOM规范的一部分，绝对不能依赖这个特性——Firefox等其他浏览器就没有这个行为，而且没有标准API支持获取所谓的“原始大小写”。

比如你在Chrome里创建document.createElementNS('http://www.w3.org/1999/xhtml', 'Test')，控制台显示<Test></Test>，但nodeName还是返回TEST，足以说明这只是控制台的特殊处理，而非DOM节点本身的属性。

内容的提问来源于stack exchange，提问作者Gunther Schadow