核心是用nodetype数值判断(如1为元素节点),兼容性最强;次选instanceof element(语义清晰但跨iframe失效);可辅以nodename验证(如"div"或"#text"),避免使用typeof或tagname等不可靠方式。

判断 DOM 树中一个节点的类型,核心是区分它到底属于哪一类节点——比如是不是元素、文本、注释,还是文档本身。最可靠的方式不是看变量名或结构,而是查它身上的标准属性。
用 nodeType 数值判断(兼容性最强)
所有节点都有 nodeType 属性,返回一个固定数字,不依赖上下文,跨 iframe 也稳定:
-
1 → 元素节点(如
<div>、<code><p></p>) - 3 → 文本节点(标签内的纯文字内容)
-
8 → 注释节点(
<!-- ... -->) - 2 → 属性节点(已基本弃用,现代开发中极少直接操作)
-
9 → 文档节点(即
document) -
el instanceof Element→ true 表示它是标准元素节点 -
textNode instanceof Element→ false,哪怕它在<div> 里<li>注意:<code>document和Text实例都不满足这个条件 - 元素节点 →
"DIV"、"P" - 文本节点 →
"#text" - 注释节点 →
"#comment" - 文档节点 →
"#document" -
typeof node === "object":所有节点都是 object,无法区分类型 -
node.tagName:仅元素有,文本/注释节点访问会报错 -
!!node.querySelector:DocumentFragment 等非元素节点也有该方法 -
node.constructor === HTMLElement:跨 iframe 失效,且 SVG 元素不继承自 HTMLElement
写法简单直接:node.nodeType === 1 就能准确知道是不是元素节点。
用 instanceof 检查是否为 Element(语义最清晰)
如果你确认运行环境是单页面且无跨 iframe 场景,instanceof Element 是最直观的写法:
它反映的是原型链关系,符合面向对象直觉,但遇到 iframe 跨域时会失效(不同上下文的 Element 构造函数不相等)。
配合 nodeName 辅助验证(调试友好)
nodeName 返回大写的字符串名称,适合快速识别和日志输出:
单独用它不可靠(可被伪造),但和 nodeType 组合使用,既安全又易读:node.nodeType === 1 && node.nodeName === "DIV"。
哪些方法要避开
以下方式容易出错,不建议作为主判断逻辑:
真正健壮的判断,始终围绕 DOM 规范定义:元素节点 = nodeType === 1 或 node instanceof Element。











