我读到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>