元素的属性nodeName自动变为lowerCase

Question

为什么元素属性属性中的属性的nodeName变成小写，以及如何使其成为camelCase？

我有以下代码：

<div myAttr = "true"></div>
<script>
var div = document.getElementsByTagName('div')[0];
var attr = div.attributes[0];
console.log(attr.nodeName);
</script>

这将显示myattr，但在标记中是myAttr，为什么？那怎么解决呢？

Answer 1

所有代码都必须是小写:这适用于HTML元素名称、属性、属性值(除非文本/CDATA)、CSS选择器、属性和属性值(字符串除外)。

请参考以下链接：https://google.github.io/styleguide/htmlcssguide.html#Capitalization

Answer 2

来自HTML规范：

…在HTML语法中，属性名，甚至是针对外部元素的属性名，都可以用大小写字母的任意组合来编写，这些字母是对属性名称不区分大小写的匹配。

如果您按照链接并向上滚动，也有类似的标签名称部分。

因此，所发生的情况是HTML解析器并不关心属性名称所使用的大小写组合。我找不到一个确切的地方，即必须由DOM (这是最相关的位)将自定义属性标准化为小写，但是由于匹配必须是不区分大小写的，为什么不。请注意，如果您在混合情况下尝试这样做：

div.getAttribute('myAttr')

它将返回预期值，即使在内部属性名是“myattr”。再说一遍，这也会起到同样的作用：

div.getAttribute('MYattR')