js查找页面所有name属性标签

直接说结论：document.getElementsByName() 是查找唯一原生支持按 name 查找的 API，但它只认表单元素（input、页面select、所有属性textarea 等），标签且返回的查找是 NodeList 而非数组。如果你要抓页面里所有带 name 属性的页面标签——不管是不是表单——那得换思路。

我上周处理一个老项目，所有属性页面里散落着十几个 <div name="section">，标签还有几个 <span name="tooltip">，查找都是页面后端模板直接拼出来的。用 getElementsByName 一试，所有属性返回空。标签查了下文档才意识到，查找这方法压根不 care 非表单标签。页面

正确的所有属性姿势是 document.querySelectorAll('[name]')。这行代码返回所有带 name 属性的元素，不管什么标签。注意它返回的是静态 NodeList，不是实时的。如果你在循环里动态添加新元素，这列表不会自动更新，得重新查询。

想要更精确，比如只找 div 里的 name，就写 document.querySelectorAll('div[name]')。属性选择器支持完全匹配、前缀匹配、包含匹配。比如 [name^="sec"] 匹配 name 以 "sec" 开头的元素，[name*="data"] 匹配 name 里含 "data" 的。

有个坑必须提醒你：querySelectorAll 返回的是 NodeList，不是纯数组。它虽然有 forEach 方法，但 filter、map 这些数组方法全没有。想用数组方法，先转一下：Array.from(document.querySelectorAll('[name]')) 或者用扩展运算符 [...document.querySelectorAll('[name]')]。我习惯用后者，写起来短。

性能上，querySelectorAll 内部是浏览器原生 CSS 选择器引擎，处理几百个节点毫无压力。但别在循环里反复查询同一个选择器，比如 for 循环里每次都调 querySelectorAll，那会浪费性能。一次性查完存到变量里再遍历。

还有个冷门技巧：如果你只关心表单控件，用 getElementsByName 其实更快，因为它直接走 HTMLDocument 的专用路径，返回的是 HTMLCollection（也是实时的）。但它的行为有点怪——返回的 NodeList 里可能包含重复节点，比如同 name 的 radio 按钮，每个都算一个。而 querySelectorAll 返回的是去重后的元素列表。

实际项目里，我一般这么组合用：先 querySelectorAll 抓全部，再根据业务筛选。比如抓所有带 name 的输入框，写 document.querySelectorAll('input[name]')，然后遍历处理。如果遇到动态加载的内容，就在内容插入后重新查询一次。

写代码时记得判断返回结果是否为空。NodeList 是类数组，length 为 0 代表没找到。别直接假设一定能查到东西，尤其是页面结构变化频繁的地方。

最后说个偏门场景：XML 文档里也有 name 属性，但 querySelectorAll 只适用于 HTML 文档。处理 XML 得用 getElementsByTagName 加手动过滤，或者用 XPath。不过前端日常碰到的都是 HTML，这情况基本遇不到。

总结就一句话：document.querySelectorAll('[name]') 是万能钥匙，表单场景用 getElementsByName 做优化，其他情况一律 querySelectorAll。