推荐用 instanceof Element 判断元素节点,语义清晰且现代浏览器兼容;跨 iframe 场景需改用 nodeType === 1,兼容性最强;可辅以 nodeName 验证,避免误判。

检测 DOM 元素节点类型,核心是区分“它是不是一个元素节点”,而不是笼统地说“是不是 DOM 对象”。因为 document、文本节点、注释节点、属性节点等都属于 DOM 节点,但只有 元素节点(如 <div>、<p>)才具备 className、querySelector、style 等常用属性和方法。
用 instanceof 判断是否为 Element(推荐)
这是最语义清晰、面向对象、且兼容现代浏览器的写法。它直接检查对象是否继承自 Element 构造函数:
-
element instanceof Element→ true 表示是标准 HTML/SVG 元素节点 -
textNode instanceof Element→ false(哪怕它是div.firstChild) -
document.body instanceof HTMLElement→ true(更具体,但仅限 HTML 元素)
注意:instanceof 在 iframe 跨域场景下可能失效(因不同上下文的 Element 构造函数不共享),此时需改用 nodeType。
用 nodeType === 1 判断(兼容性最强)
nodeType 是所有节点共有的只读属性,值为数字。元素节点的固定值是 1:
-
node.nodeType === 1是判断元素节点最通用的方式 - 它不依赖构造函数,跨 iframe 也可靠
- 避免使用
Node.ELEMENT_NODE常量(IE8 及以下不支持Node对象)
其他常见值:文本节点为 3,注释节点为 8,文档节点为 9 —— 可用于排除非元素类型。
结合 nodeName 快速过滤(辅助验证)
nodeName 返回大写的标签名(如 "DIV"),对元素节点有效;对文本节点返回 "#text",注释节点为 "#comment":
typeof node === 'object' && node && node.nodeType === 1 && typeof node.nodeName === 'string'- 可加一层
node.nodeName !== '#text' && node.nodeName !== '#comment'避免误判 - 单独用
nodeName不够严谨(比如伪造对象也可能有该属性)
实际中常与 nodeType 搭配,增强可读性或做调试输出。
不建议单独使用的判断方式
以下方法容易出错,应避免作为主判断逻辑:
-
node.tagName:仅元素节点有,但null或undefined会报错,且 SVG 元素在某些旧环境返回小写 -
typeof node === 'object' && node.nodeType:无法区分元素、文本、注释等节点类型 -
!!node.querySelector:部分非元素节点(如DocumentFragment)也有该方法,且 IE8 不支持 -
node.constructor === HTMLElement:跨 iframe 失效,且不是所有元素都继承自HTMLElement(如 SVG 元素)
真正健壮的检测,应聚焦于标准定义:元素节点 = 继承自 Element 或 nodeType === 1。

















