为何SVG元素的tagName为小写，非SVG HTML元素的tagName为大写？

先看实际运行的例子：

HTML代码 #

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="background: peachpuff;">
    <a id="SvgLink" href="http://perdu.com">
        <circle  cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
    </a>
</svg>

<a id="link" href="http://perdu.com">Link</a>

JS代码 #

console.log("standard :", document.getElementById('link').tagName)  // 输出 "A"
console.log("svg : ", document.getElementById('SvgLink').tagName)  // 输出 "a"

造成这种差异的核心原因是元素所属的命名空间不同：

• 标准HTML元素属于HTML命名空间（http://www.w3.org/1999/xhtml），DOM规范明确规定这类元素的tagName属性统一返回大写形式。这是历史遗留的约定——早期HTML不区分标签大小写，DOM API为了兼容性和统一处理逻辑，把所有HTML元素的tagName都转为大写返回。
• SVG元素属于SVG命名空间（http://www.w3.org/2000/svg），SVG是基于XML的语言，XML严格区分大小写。DOM规范对XML命名空间下的元素，会返回其在DOM中存储的原始小写形式（哪怕你写SVG标签时用了大写，浏览器也会自动标准化为小写，最终tagName还是小写）。

总结来说：HTML命名空间的元素tagName强制返回大写，SVG（XML命名空间）的元素tagName保持小写。

内容的提问来源于stack exchange，提问作者Matthieu Riegler