JavaScript 判断 DOM 对象的兼容方案

作者:微光

时间:2026-10-30

浏览:595

本文介绍在 JavaScript 中判断对象是否为 DOM 对象的兼容方案。核心思路利用 DOM Level2 标准中 HTMLElement 对象,通过检查 typeof HTMLElement 是否为 object 来区分浏览器实现。若支持则使用 instanceof 判断,否则回退至特征检测(nodeType 和 nodeName)。

文章目录

判断 DOM 对象的兼容方案

在编写 JavaScript 代码时,经常需要确认某个对象是否属于 DOM 对象,以便执行后续操作。为此,本文提供一种兼容主流浏览器且相对稳妥的判断方法。

判断对象是否为 DOM 对象,最直观的思路是检查其是否具备 DOM 对象的典型属性或特征,例如是否存在 nodeType 属性或 tagName 属性。虽然检测的特征越多,判断结果越可靠(因为自定义 JS 对象也可能拥有这些属性),但这种方法并非唯一途径。

根据 DOM Level2 标准,所有 DOM 对象均为 HTMLElement 的实例。因此,可以利用这一特性进行判断:若对象是 HTMLElement 的实例,则它必定是 DOM 对象。对于不支持 HTMLElement 的浏览器,则继续使用特征检测法作为补充。


<script type="text/javascript">
  //首先要对HTMLElement进行类型检查,因为即使在支持HTMLElement
  //的浏览器中,类型却是有差别的,在Chrome,Opera中HTMLElement的
  //类型为function,此时就不能用它来判断了
  var isDOM = ( typeof HTMLElement === 'object' ) ?
        function(obj){
          return obj instanceof HTMLElement;
        } :
        function(obj){
          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
        }
  </script>

以上即为判断 JavaScript 对象是否为 DOM 对象的完整内容,希望对大家有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章