JavaScript中如何判断一个值是否为DOM元素？

尽管这个问题看起来有些幼稚（事实上确实如此），但我始终没能找到相关答案。我搜索到的结果均是关于判断元素是否已存在于DOM中的内容（这虽然能解决我的问题，但这种解决方式非常不专业）。以下是我的代码示例：

function randomName(element) { 
  // Im trying to find some method like this: 
  const result = isElement(element) ? true : false 
}

嘿，太懂这种不想用“曲线救国”方法的心情了！咱们直接来写真正专业的isElement函数，完全不用依赖元素是否挂载在DOM树上：

方案1：利用nodeType属性（最简洁且无场景限制） #

所有DOM元素节点的nodeType属性值都是1，这是DOM标准规定的，所以这是最可靠的判断方式：

function isElement(element) {
  // 先排除null/undefined/非对象类型，避免报错
  return element != null && typeof element === 'object' && element.nodeType === 1;
}

方案2：使用instanceof（适合无跨框架场景） #

如果你的代码不会涉及iframe或者多窗口的DOM元素，这种写法更直观：

function isElement(element) {
  return element instanceof Element;
}

⚠️ 注意：不同窗口（比如iframe）的Element构造函数是独立的引用，这种情况下instanceof会误判为false，所以有跨框架需求的话优先选方案1。

方案3：通过Object.prototype.toString做精准类型检测 #

这种方式能准确识别对象的内部类型，适合对类型判断要求极高的场景：

function isElement(element) {
  if (element == null || typeof element !== 'object') return false;
  const typeStr = Object.prototype.toString.call(element);
  // 匹配所有HTML元素或基础Element类型
  return /^\[object (HTML\w+|Element)\]$/.test(typeStr);
}

以上这几种方法都是直接从元素的类型本质出发判断，完全符合你想要的“专业”解决方式，再也不用靠检查元素是否在DOM里凑活啦！

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