Element.tagName 是否总是大写？答案

【问题标题】：Is Element.tagName always uppercase?Element.tagName 是否总是大写？
【发布时间】：2014-12-01 07:42:22
【问题描述】：

阅读MDN about Element.tagName 声明：

在标记为 HTML 文档的 DOM 树中的 HTML 元素上，tagName 以大写形式返回元素名称。

我的问题是：这可信吗？ IE（旧的和现代的）是否按预期运行？这可能会改变吗？还是一直使用el.tagName.toLowerCase() 会更好？

【问题讨论】：

n XML (and XML-based languages such as XHTML), tagName preserves case. 因此，例如，如果在 doctype 中设置 xhtml - tagName 将保留大小写
@LeoDeng 这是来自mdn的引用
我做过测试，但事实并非如此。我已经更新了我的答案，请看一下。
tagName 是小写的 SVG jsFiddle
@VenkataRaju :o!!

标签： javascript

【解决方案1】：

您不必toLowerCase 或其他任何东西，浏览器在这一点上的行为确实相同（令人惊讶吧？）。

关于基本原理，有一次我与一位对 W3C 标准非常专业的同事进行了讨论。他的观点之一是使用大写的 TAGNAME 会更容易从用户内容中识别出来。这对我来说很有说服力。

编辑：正如@adjenks 所说，如果文档以Content-Type: application/xhtml+xml 的形式提供，XHTML doctype 会返回大小写混合的 tagName。测试页面：http://programming.enthuses.me/tag-node-case.php?doc=x

从技术上讲，请阅读此规范以获取更多信息：http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614

请注意，这个 (tagName) 在 XML 中保留大小写，与 DOM 的所有操作一样。无论源 HTML 文档中的大小写如何，HTML DOM 都会以规范的大写形式返回 HTML 元素的 tagName。

至于提问者的问题：这是值得信赖的。 HTML 规范中不太可能发生重大变化。

【讨论】：

我认为 XHTML 的全部意义在于从使用 SGML 切换到 XML。事实上，当 XHTML 是无效的 XML 时，大多数浏览器都会放弃（或者至少习惯于在它刚出现时支持）。
@Alex 显然你不是在谈论 XHTML 2.0，它现在已经死了。如果语法不是 100% 正确，它毫不留情。
@adjenks 你是怎么做到的？如果文档被视为 XML，则标记应为小写。这里我们讨论的是 HTML 标签。
@adjenks 你能提供一个 jsfiddle 什么的吗？
@Leo 这是一个网站链接，该链接展示了一个返回大小写混合的标签：gofiddleyourself.jelikraft.ca/27223756/… 它将页面呈现为 XHTML 而不仅仅是 HTML 的原因是因为 Content-Type设置为application/xhtml+xml，这是 XHTML 文档的正确内容类型。很少有人在开发网页时真正设置他们的内容类型，这就是为什么他们在解析文档时不会注意到小写标签。

【解决方案2】：

在WebKit/Chromium中它是不可信的，WebKit也可以创建小写的tagName属性，大多数网页构建大写的tagName，但也可以构建小写的值，所以如果你使用WebKit你必须准备好支持两种情况。我认为 tagName 总是大写的（大部分都是大写的），我发现我错了，现在我必须很少修复我的脚本 :)

chrome's inspector screenshot here

编辑： console.log

【讨论】：

您可以发console.log(element.tagName) 来确认吗？在那种情况下，将是一个重大的向后兼容性中断......
这需要更多的支持，因为它证明接受的答案并不总是正确的。
看我的回答stackoverflow.com/a/52035222/368254 看来SVG元素在所有主流浏览器中都是小写的。
问题是关于“DOM 树标记为 HTML 文档”。这个答案绝对值得了解，但公认的答案仍然正确。

【解决方案3】：

tagName 和 nodeName 以小写或区分大小写的形式出现，以防页面 响应标题 具有 Content-type: application/xhtml+xml; 标题或任何与 xhtml 相关的内容类型。例如document.documentElement.nodeName 返回html 阅读更多案例：https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614

【讨论】：

我今天经历了这一点。真的把我甩了。破坏了我库中的一个函数。
我在使用 jQuery 时了解到这个问题，并在匹配 tagName 时破坏了一个函数。
另一个测试页面，测试不同的HTML版本：programming.enthuses.me/tag-node-case.php?doc=x

【解决方案4】：

如果您的代码需要小写输出，请使用element.tagName.toLowerCase()。如果将来标准更改为小写，那么您将不会在输出中获得不同的值，因为它无论如何都被格式化为小写。

相反，如果您没有留下toLowerCase()，那么如果标准更改为小写输出，您的代码输出可能会发生变化。

我怀疑标准会因此而改变。这完全取决于您的需求。

【讨论】：

【解决方案5】：

我的测试表明，在我 2018 年 8 月检查的所有浏览器（Chrome 68、Firefox 61、Edge 42、IE11）中，SVG 元素的 tagName 似乎都是小写的

不确定这与 MDN 文档中提到的“DOM 树”有何关系 - 尽管 SVG 树是 DOM 树的一部分，但它们可能会被单独/不同地处理。最后，开发人员通常会谈到“SVG 元素”和“DOM 元素”，因为他们指出它们不是同一个东西。

无论如何，如果您的应用程序需要处理 SVG 元素以及常规 DOM 元素，请务必使用tagName.toUpperCase()。

【讨论】：

@Leo 在他的回答中提到：xml 是保留大小写的，svg 是一种基于 xml 的格式。