如何在javascript中获得(X)HTMLDOM中元素名称的原始大小写



我读到HTML总是从Node.prototype.nodeName和HTMLElement.prototype.tagName都变成大写,但不是HTML的XML元素保留在原来的大小写中。

这不是我的发现。一切都变成了大写,尖叫着";我们还停留在80年代"当着我们的面。

<html>
<body>
<script>
const e = document.createElement('fooBar');
document.firstElementChild.insertBefore(e, document.firstElementChild.firstElementChild);
</script>
<p>
<span>Hello</span>
<script>       document.currentScript.parentElement.firstElementChild.innerText = e.nodeName + " (" + e.namespaceURI + ")";
</script>
</p>
</body>
</html>

现在真正的真相是什么?

如何恢复原始案例?

如何保存案例?

我知道我可以创建一个new Document(),然后我在其中创建的节点保持区分大小写。

我想,如果我将HTML文档声明为XHTML,它应该是小写和保留大小写。如何在HTMLDOM中保留XML的大小写?


更新

尽管这个问题几乎得到了的回答,但这里仍然有一个特殊的观察结果,这是来自Chrome控制台

t = document.createElement('test')
<test>​</test>​
t.namespaceURI
'http://www.w3.org/1999/xhtml'
u = document.createElement('TEST')
<test>​</test>​
v = document.createElementNS(t.namespaceURI, t.nodeName)
<TEST>​</TEST>​
w = document.createElementNS(t.namespaceURI, 'test')
<test>​</test>​
x = document.createElementNS(t.namespaceURI, 'TEST')
<TEST>​</TEST>​
y = document.createElementNS(t.namespaceURI, 'Test')
<Test>​</Test>​
z = document.createElementNS('s', 'Test')
<Test>​</Test>​
[t, u, v, w, x, y, z].map(e => e.nodeName)
(7) ['TEST', 'TEST', 'TEST', 'TEST', 'TEST', 'TEST', 'Test']

请注意,虽然Chrome在XHTML命名空间中无法判断标签名称的大小写,但它在自己的树内部显示中突然知道了它。然而,我无法找到它是如何做到这一点的,因为似乎没有找到原始案例的方法或getter。

以下是来自Firefox控制台的相同内容,它无法做Chrome似乎能够做的事情:

t = document.createElement('test')
<test>
t.namespaceURI
"http://www.w3.org/1999/xhtml"
u = document.createElement('TEST')
<test>
v = document.createElementNS(t.namespaceURI, t.nodeName)
<test>
w = document.createElementNS(t.namespaceURI, 'test')
<test>
x = document.createElementNS(t.namespaceURI, 'TEST')
<test>
y = document.createElementNS(t.namespaceURI, 'Test')
<test>
z = document.createElementNS('s', 'Test')
<Test>
[t, u, v, w, x, y, z].map(e => e.nodeName)
Array(7) [ "TEST", "TEST", "TEST", "TEST", "TEST", "TEST", "Test" ]

因此,虽然Firefox与我选择的答案相匹配,但Chrome有一些额外的怪癖,仍然可以使用原始拼写。

确保元素不是HTML元素。因此使用createElementNS而不是createElement。命名空间不能是HTML命名空间。空字符串即可。

<!DOCTYPE html>
<html>
<body>
<script>
const e = document.createElementNS('', 'fooBar');
document.firstElementChild.insertBefore(e, document.firstElementChild.firstElementChild);
</script>
<p>
<span>Hello</span>
<script>
document.currentScript.parentElement.firstElementChild.innerText = e.nodeName;
</script>
</p>
</body>
</html>

相关内容

  • 没有找到相关文章

最新更新