为何JavaScript中判断tagName时LI需大写？求技术解析

function toggleClassDoneOnAndOff(event) {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("done");
    }
}
ul.addEventListener("click", toggleClassDoneOnAndOff);

这是因为HTML文档环境中，DOM元素的tagName属性会统一返回大写的标签名，不管你在HTML代码里写的是小写<li>、混合大小写<Li>还是大写<LI>。

具体原因拆解：

• HTML本身是大小写不敏感的标记语言，浏览器解析时会统一处理各类大小写的标签，但DOM规范明确规定，在HTML语境下，tagName的返回值必须是大写字符串。
• 举个例子：哪怕你页面里写的是<li>待办项</li>，用console.log(event.target.tagName)打印出来的结果也肯定是LI。如果你的判断条件写成=== "li"，就永远匹配不上，toggle类的逻辑也就不会触发。

额外补充：如果是XML或严格模式的XHTML文档，tagName会保留标签的原始大小写，但现在绝大多数网页都是HTML5环境，所以不用考虑这种特殊情况，统一用大写判断就没问题。

内容的提问来源于stack exchange，提问作者Hernani Diniz