ie中document.getelementbyid会误将name属性值相同的元素当作id匹配,导致返回错误元素;document.getelementsbyname在ie中也同时匹配name和id属性,且div等非表单元素的name不被支持;应避免name与id同名,并优先用id定位、name分组。

document.xxx 会误读同名元素,尤其在IE中
当页面存在 document.login 这类写法时,它不是标准 API,而是 IE 早期历史遗留行为:把所有带 name 的元素(包括 <input name="login">、<div name="login">)挂到 <code>document 对象下。结果就是:document.login 可能返回表单,也可能返回某个 input,甚至 div —— 完全取决于 DOM 解析顺序和浏览器版本。
-
<form name="login" id="login"></form>和<input name="login">同时存在 →document.login行为不可预测 -
document.getElementById("login")始终返回该表单(因为id是唯一锚点) - 现代浏览器已逐步移除该挂载机制,但旧项目或兼容性代码里仍可能触发
form 元素的 name/id 与内置属性名冲突会导致表单失效
给 <form></form> 或其子元素设 name 或 id 为 submit、length、method 等原生属性名,会覆盖 JS 中的对应方法或属性。最典型的是:<form name="submit"></form> 或 <button id="submit"></button> 会让 form.submit() 调用失败,控制台报错 form.submit is not a function。
- 冲突关键词包括:
submit、reset、action、method、enctype、length - 不只是
name,id同样触发(因为document.getElementById返回的元素会污染 form 的属性命名空间) - 该问题在 IE 和早期 Chrome 中尤为明显,现代浏览器仍保留部分兼容逻辑
getElementsByName 返回非表单控件,但 HTML5 不允许这么做
document.getElementsByName("xxx") 在老浏览器中会匹配任意带 name 属性的元素(比如 <div name="xxx">),但 HTML5 规范明确限定:只有 <code><form></form>、<input>、<select></select>、<textarea></textarea>、<button></button>、<iframe></iframe>、<img>、<map></map>、<meta>、<object></object>、<param> 等可提交或具语义的元素才支持 name 属性。给 <span></span> 或 <div> 加 <code>name 是无效标记,且现代浏览器的 getElementsByName 已不再返回它们。
- 旧版 IE 曾对动态插入的
name元素漏匹配,导致脚本取不到值 -
getElementsByName总是返回NodeList,哪怕只有一个匹配项,必须写document.getElementsByName("x")[0] - 性能上比
getElementById差一个数量级(O(n) 全量扫描 vs O(1) 哈希查找)
radio/checkbox 分组失效常被误判为 JS 问题,实则是 name 混用
一组 <input type="radio"> 必须共享完全相同的 name 值才能互斥;若其中某个 radio 的 name 因拼写错误、大小写差异(如 gender vs Gender)或空格(name=" user_type")而不同,它就脱离分组,变成独立控件 —— 用户可同时选中多个,后端收到多个同名字段却只取最后一个值。
- 常见错误:
<input name="hobby">和<input name="hobby ">(尾部空格)→ 实际是两个不同 name -
name区分大小写,NAME≠name,也不等于Name - 不要依赖
id来“模拟”分组逻辑,id对单选/多选语义零作用
name 做定位、用 id 做提交时,问题往往不是“不工作”,而是“有时候工作,有时候不”。











