在JavaScript中，当处理HTML DOM元素时，`nodeName`和`tagName`通常会将元素名称转换为大写。本文将深入探讨这一现象的原因，并提供一种可靠的方法来创建并获取保持原始大小写的元素名称，即通过使用`document.createElementNS`并指定一个非HTML命名空间。文章还将讨论不同浏览器在处理此问题时的一些细微差别，帮助开发者更好地理解和应对DOM元素大小写的问题。
理解HTML DOM元素名称的大小写行为
在Web开发中，我们经常通过JavaScript来操作DOM（文档对象模型）。然而，一个常见的困惑是，无论我们如何创建HTML元素（例如，使用document.createElement('fooBar')），当我们尝试通过element.nodeName或element.tagName访问其名称时，结果总是大写（例如，FOOBAR）。这与XML元素（非HTML）的行为形成对比，后者通常会保留其原始大小写。
这种行为的根源在于HTML规范。HTML（特别是HTML5及更高版本）是大小写不敏感的，浏览器在解析HTML文档时会将标签名规范化为大写。因此，当你在HTML文档中创建或查询元素时，即使你用小写或混合大小写创建了它，DOM接口也会将其视为大写。
考虑以下示例：
立即学习“Java免费学习笔记（深入）”；
<html>
<body>
<script>
const e = document.createElement('fooBar');
document.firstElementChild.insertBefore(e, document.firstElementChild.firstElementChild);
</script>
<p>
<span>Hello</span>
<script>
// 尽管创建时是'fooBar'，但输出会是'FOOBAR'
document.currentScript.parentElement.firstElementChild.innerText = e.nodeName + " (" + e.namespaceURI + ")";
</script>
</p>
</body>
</html>在此代码中，e.nodeName将输出FOOBAR，并且e.namespaceURI将是http://www.w3.org/1999/xhtml，这表明它被视为一个HTML元素。
解决方案：使用createElementNS保留元素名称的大小写
要保留DOM元素名称的原始大小写，关键在于避免将其视为标准的HTML元素。这可以通过使用document.createElementNS()方法来实现，并指定一个非HTML命名空间。
document.createElementNS(namespaceURI, qualifiedName)方法允许我们创建一个具有指定命名空间URI和限定名称的元素。如果namespaceURI是HTML命名空间（http://www.w3.org/1999/xhtml），则浏览器仍会将其视为HTML元素并进行大小写规范化。因此，为了保留大小写，我们需要提供一个不同的命名空间URI。最简单且有效的方法是使用一个空字符串''作为命名空间URI。
当namespaceURI为空字符串时，浏览器会将该元素视为一个普通的XML元素，而不是特定的HTML元素。在这种情况下，qualifiedName（即元素名称）将按照其原始大小写被保留。
以下是修改后的示例代码：
<html>
<body>
<script>
// 使用createElementNS，并指定空字符串作为命名空间URI
const e = document.createElementNS('', 'fooBar');
document.firstElementChild.insertBefore(e, document.firstElementChild.firstElementChild);
</script>
<p>
<span>Hello</span>
<script>
// 此时，e.nodeName 将输出 'fooBar'
document.currentScript.parentElement.firstElementChild.innerText = e.nodeName;
</script>
</p>
</body>
</html>在这个示例中，e.nodeName将正确地输出fooBar，保留了创建时的原始大小写。
深入探讨：浏览器行为的差异与namespaceURI
即使使用了createElementNS，关于元素命名空间和大小写处理，不同浏览器可能会展现出一些细微的差异，尤其是在调试控制台中。
考虑以下在控制台中执行的JavaScript代码：
t = document.createElement('test');
console.log(t.nodeName); // 通常是 "TEST"
console.log(t.namespaceURI); // "http://www.w3.org/1999/xhtml"
u = document.createElement('TEST');
console.log(u.nodeName); // 通常是 "TEST"
// 使用HTML命名空间创建，仍会被规范化
v = document.createElementNS('http://www.w3.org/1999/xhtml', 'Test');
console.log(v.nodeName); // 通常是 "TEST"
// 使用非HTML命名空间（空字符串）创建，保留大小写
z = document.createElementNS('', 'Test');
console.log(z.nodeName); // "Test"
console.log(z.namespaceURI); // ""Chrome控制台的特殊之处： 在某些版本的Chrome浏览器控制台中，当你创建像t = document.createElement('test')这样的元素后，控制台可能会在输出<test>时显示原始大小写。然而，当你通过t.nodeName访问时，它仍然会返回TEST。这表明Chrome的开发者工具可能在内部维护了原始的标签信息以供显示，但标准的DOM API（如nodeName）仍然遵循HTML规范进行大小写规范化。
Firefox控制台的行为： 相比之下，Firefox的控制台通常会更一致地显示规范化后的元素名称。例如，document.createElement('test')在控制台中也会显示为<test>，但当你访问t.nodeName时，它依然是TEST。Firefox在显示和API行为上保持了更高的一致性。
关键点总结：
- HTML命名空间内的元素： 无论是通过document.createElement()还是document.createElementNS('http://www.w3.org/1999/xhtml', ...)创建的元素，只要它们属于HTML命名空间，其nodeName和tagName属性都会返回大写形式。
- 非HTML命名空间内的元素： 只有当使用document.createElementNS()并指定一个非HTML命名空间（例如，空字符串''，或者自定义的XML命名空间）时，元素名称的原始大小写才会被nodeName属性保留。
- 浏览器控制台显示： 浏览器控制台的内部显示机制可能与DOM API的返回值有所不同。不要仅仅依赖控制台的视觉输出，而应以nodeName或tagName的实际返回值为准。
总结与注意事项
- HTML元素大小写： 在标准的HTML DOM中，元素名称（通过nodeName或tagName获取）总是被规范化为大写。这是HTML规范的行为。
- 保留大小写的唯一方法： 要在DOM中创建并获取保留原始大小写的元素名称，必须使用document.createElementNS(namespaceURI, qualifiedName)方法，并确保namespaceURI不是HTML命名空间（http://www.w3.org/1999/xhtml）。
- 推荐的非HTML命名空间： 最简单有效的非HTML命名空间是空字符串''。这会将元素视为一个普通的XML元素。
- namespaceURI属性： 可以通过element.namespaceURI属性来检查元素的命名空间。HTML元素的该属性通常为http://www.w3.org/1999/xhtml，而通过createElementNS('', 'fooBar')创建的元素的该属性将是空字符串''。
- 兼容性考虑： 这种方法在所有现代浏览器中都是标准且兼容的。
通过理解HTML DOM处理元素名称大小写的底层机制，并正确运用document.createElementNS方法，开发者可以有效地控制和获取DOM元素的原始大小写名称，尤其在处理SVG、MathML或自定义XML等需要大小写敏感的场景时，这一点尤为重要。
