在 JavaScript 中，直接访问 form.name 可能因表单内存在同名 <input name="name"> 元素而返回该 DOM 元素而非字符串值；最可靠、跨浏览器兼容的方式是使用 form.getAttribute('name')，它始终返回属性原始字符串值或 null。
在 javascript 中，直接访问 `form.name` 可能因表单内存在同名 `` 元素而返回该 dom 元素而非字符串值；最可靠、跨浏览器兼容的方式是使用 `form.getattribute('name')`，它始终返回属性原始字符串值或 `null`。
HTML 表单的 name 属性是可选的，且其值可能为空字符串（""）、未声明（null）或有效标识符（如 "myform"）。然而，直接读取 form.name 存在严重陷阱：当表单内部包含 <input name="name"> 时，form.name 将返回该 input 元素（而非字符串），这是由 HTML 规范定义的“命名属性反射”行为所致，且在所有现代浏览器（Chrome、Firefox、Safari、Edge）及 IE9+ 中均一致发生。
✅ 正确做法：使用 getAttribute()
该方法绕过 DOM 属性反射机制，直接读取 HTML 属性值，行为稳定、语义明确：
const form = document.getElementById('myform');
const formName = form.getAttribute('name'); // 始终返回 string 或 null
if (formName !== null && formName !== '') {
console.log(`Form's name is "${formName}"`);
// ✅ 安全执行依赖 name 的逻辑
} else {
console.log('Form has no valid name attribute');
}⚠️ 注意事项：
- getAttribute('name') 返回 null（属性不存在）或空字符串 ""（<form name="">），二者均为 falsy，但语义不同：建议显式判断 formName != null && formName.trim() !== '' 以排除空白值；
- 不要使用 form.hasAttribute('name') 单独判断——它无法区分 name="" 和缺失 name；
- 避免 form.name === undefined 或 typeof form.name === 'string' 等检测，因其在含 name 字段的表单中必然失效；
- getAttribute() 兼容性极佳，支持 IE6+ 及所有现代浏览器，无需 polyfill。
? 实用封装示例：
function getFormName(formElement) {
if (!(formElement instanceof HTMLFormElement)) {
throw new TypeError('Expected HTMLFormElement');
}
const name = formElement.getAttribute('name');
return typeof name === 'string' && name.trim() ? name.trim() : null;
}
// 使用示例
const form = document.querySelector('form');
const name = getFormName(form);
console.log(name); // "myform" | null综上，form.getAttribute('name') 是获取表单 name 属性唯一可靠、语义清晰、跨浏览器无差异的方案。它规避了 DOM 属性与表单控件命名冲突的根本问题，应作为标准实践写入团队编码规范。
立即学习“前端免费学习笔记（深入）”；
