如何判断传入JavaScript函数的参数是否为HTML元素？

你之前的判断逻辑错误在于：直接将参数与HTMLElement/Element这些构造函数本身做全等比较，而参数是DOM元素实例，和构造函数本身完全不是同一类型的值，所以这些判断永远会返回true，导致你直接返回undefined。

下面是几种可靠的检查方法：

1. 判断是否为HTML元素实例（通用） #

使用instanceof #

适用于同上下文的场景，直接判断参数是否是HTMLElement的实例：

function checkHTMLElement(param) {
  if (!(param instanceof HTMLElement)) {
    return undefined;
  }
  // 此处编写后续逻辑
}

注：如果需要包含SVG等其他DOM元素，可替换为Element。

使用Object.prototype.toString.call()（跨上下文可靠） #

当存在iframe等跨上下文场景时，instanceof可能失效，这种方法更稳定：

function checkHTMLElement(param) {
  if (Object.prototype.toString.call(param) !== '[object HTMLElement]') {
    return undefined;
  }
  // 此处编写后续逻辑
}

2. 判断是否为特定HTML元素（如

/

） #

如果需要精准判断是某一类标签，可结合tagName属性：

function checkSpecificElement(param, targetTag) {
  // 先确认是HTML元素
  if (Object.prototype.toString.call(param) !== '[object HTMLElement]') {
    return undefined;
  }
  // 统一转小写避免大小写问题
  if (param.tagName.toLowerCase() !== targetTag.toLowerCase()) {
    return undefined;
  }
  // 此处编写后续逻辑
}

// 使用示例：检查是否为<div>
checkSpecificElement(param, 'div');
// 检查是否为<p>
checkSpecificElement(param, 'p');

3. 基础节点类型判断（兼容所有元素节点） #

如果只需要判断是否是DOM元素节点（包括HTML、SVG等），可检查nodeType：

function checkElementNode(param) {
  if (!param || param.nodeType !== 1) {
    return undefined;
  }
  // 此处编写后续逻辑
}

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