htmlcollection 的 nameditem 方法只认 name 属性，且仅对表单相关元素有效；id 属性无效，非表单元素（如 div、header）调用返回 null，多值同名时仅返第一个。
HTMLCollection 的 namedItem 方法到底认什么？
它只认 name 属性，不认 id —— 这是绝大多数人踩坑的起点。哪怕元素有 id="foo"，collection.namedItem("foo") 也返回 null，除非该元素同时具备 name="foo"（且在支持 name 的可命名元素上）。
这个方法的行为由 HTML 规范定义：仅对表单相关元素（<form></form>、<input>、<button></button>、<select></select>、<textarea></textarea>、<iframe></iframe>、<img>、<map></map> 等）有效，且依赖其 name 属性值，而非 id。
-
document.forms、form.elements、document.images返回的都是HTMLCollection，支持namedItem -
document.getElementsByTagName("div")返回的HTMLCollection不支持通过name查找（因为<div> 无 <code>name语义），调用namedItem总是返回null - 若多个元素有相同
name，namedItem只返回第一个（不是 NodeList，不支持多值返回） -
name属性在非表单上下文中基本被忽略（例如<div name="x"> 对 <code>namedItem无效） -
id查找不区分大小写？不，严格区分（但 HTML id 值本身通常小写约定） - 性能上，
getElementById是 O(1) 级别，namedItem在大型集合中可能是 O(n)
为什么 document.getElementById 比 namedItem 更可靠？
因为 id 是全局唯一标识符，浏览器原生索引优化到位；而 namedItem 是运行时遍历匹配 name 属性，且受元素类型和文档位置限制。
常见误用场景：document.body.children.namedItem("header") —— children 是 HTMLCollection，但 <header></header> 没有 name 属性，结果必为 null。此时应直接用 document.getElementById("header") 或 document.querySelector("#header")。
真正能用上 namedItem 的典型场景
集中在表单数据访问，尤其是需要按字段名动态取值时，比如处理多组同名复选框或兼容旧代码逻辑。
这时可以：const form = document.getElementById("myform"); form.elements.namedItem("username") 返回那个文本框；但 form.elements.namedItem("hobby") 只返回第一个复选框（不是全部）——要拿全部得用 form.elements.hobby（返回 NodeList）或 form.querySelectorAll('[name="hobby"]')。
-
form.elements是最常配合namedItem使用的集合 - 如果字段名含特殊字符（如
user-name），需用方括号语法：form.elements["user-name"]，namedItem同样支持：form.elements.namedItem("user-name") -
namedItem对不存在的name返回null，不是undefined，注意空值判断
替代方案：什么时候该放弃 namedItem？
当你发现要查的是 id、或者元素类型不支持 name、或者需要获取所有同名元素时，就该换方法了。
- 查
id→ 无条件用document.getElementById("x") - 查
name且要全部结果 → 用document.querySelectorAll('[name="x"]')（返回静态 NodeList） - 查
name且在表单内 → 直接用form.elements.x（更简洁，等价于namedItem） - 需要类型安全或 TypeScript 支持 → 避免
namedItem，它返回Element | null，不带具体子类类型信息
真正难的不是怎么调用 namedItem，而是意识到它只在一个狭窄的语义边界里有用：表单控件 + name 属性 + 单值查找。超出这个范围，硬用只会增加调试成本。
