element.tagName返回大写字符串，需转小写或用大写常量比较；仅适用于轻量级结构分流，须配合type、属性或类名做二次校验，并先确保node为Element实例。
element.tagName 返回的是大写字符串，别直接跟小写标签名比较
DOM 节点的 tagName 属性返回的是大写的标签名（如 "DIV"、"INPUT"），不是 HTML 源码里的小写或混合写法。如果写成 element.tagName === "div"，永远为 false。
常见错误现象：判断失效，所有节点都走默认分支，组件渲染逻辑没区分。
- 统一转小写再比：
element.tagName.toLowerCase() === "div" - 或者直接用大写常量：
element.tagName === "DIV"（更安全，避免拼写/大小写混淆） - 注意：自定义元素（如
<my-button>）也会返回大写全名（"MY-BUTTON"），需按实际注册名匹配
tagName 判断适合轻量级类型分发，不适合深度语义识别
tagName 只反映 HTML 标签名，不包含语义、角色或行为意图。比如 "SPAN" 可能是图标容器、文本高亮、或是伪装成按钮的可点击区域——仅靠标签名无法可靠决定渲染哪个组件。
使用场景建议：
- 快速分流基础结构：把
"UL"/"OL"交给列表组件，"TABLE"交给表格封装器 - 配合
element.hasAttribute("data-role")或element.classList.contains("js-interactive")做二次校验 - 避免单独用
tagName区分表单控件：同为"INPUT"，type="text"和type="checkbox"应由element.type决定子组件
在 Vue/React 渲染逻辑中，tagName 判断要放在节点解析早期
如果等组件挂载后再读 tagName（比如在 mounted 或 useEffect 里），可能已错过初始渲染时机，导致 DOM 结构与组件状态不一致。
实操建议：
- 服务端或初始化阶段就遍历原始节点，用
element.tagName分类并生成配置对象 - Vue 中可在
render函数或setup()的顶层同步读取（确保 DOM 已存在） - React 中推荐在
useMemo或组件顶层变量中解析，而非useEffect（副作用太晚） - 注意：Shadow DOM 或
documentFragment中的节点同样支持tagName，但需确保访问时节点已附加到有效文档上下文
兼容性没问题，但得防住非元素节点
tagName 是 Element 接口的属性，文本节点、注释节点、Document 节点都没有该属性，直接访问会报 Cannot read property 'tagName' of null 或 undefined。
容易踩的坑：
- 没做节点类型校验就调用：
if (node.tagName)不够，因为node.tagName可能是空字符串（极少见）或undefined - 正确方式：
node.nodeType === Node.ELEMENT_NODE再取tagName - 简写判断（常用）：
node instanceof Element（现代环境稳妥，IE11 也支持） - 一行防御写法：
node?.tagName?.toUpperCase()（但需确保node确实是 Element 实例）
真正麻烦的从来不是怎么读 tagName，而是读完之后发现：这个 "DIV" 其实是富文本编辑器吐出来的不可信 HTML，里面嵌了 script 标签、内联样式、甚至 base64 图片——这时候光靠标签名做渲染分发，风险远大于便利。
