如何检测DOM元素是否为可设置name属性的表单元素

核心问题解答 #

目前浏览器原生DOM规范里不存在FormFieldElement这类统一的表单字段公共父类，你期望的instanceof写法无法直接使用。

更健壮易维护的替代实现方案 #

方案1：数组匹配法（最通用，原生JS适用） #

把需要匹配的表单标签名存到数组里，用includes判断，比堆叠||运算符更易维护，后续新增标签类型只需要修改数组即可：

// 可按需扩展要匹配的标签，比如新增BUTTON、OUTPUT等
const validFormTags = ['INPUT', 'TEXTAREA', 'SELECT']
if (validFormTags.includes(lastElement.tagName)) {
  // 业务逻辑
}

如果需要过滤掉不适合设置name的特殊输入类型，可以加额外判断：

const validFormTags = ['INPUT', 'TEXTAREA', 'SELECT']
// 排除不需要设置name的input类型，可按需调整
const excludeInputTypes = ['hidden', 'button', 'reset', 'image']
if (validFormTags.includes(lastElement.tagName) && !excludeInputTypes.includes(lastElement.type)) {
  // 业务逻辑
}

方案2：类型守卫（TypeScript场景适用） #

如果是TS项目，可以自定义类型守卫，同时实现类型校验和类型推导：

// 定义表单元素联合类型
type FormFieldElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement

function isFormField(el: HTMLElement): el is FormFieldElement {
  return ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)
}

// 调用时TS会自动推导类型，获得对应元素的属性提示
if (isFormField(lastElement)) {
  // 业务逻辑
}

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