JavaScript中查询页面所有下拉菜单节点应优先使用document.querySelectorAll('select')获取原生select元素；若需数组可转为Array.from或展开运算符；可见可用的需额外过滤hidden、display和visibility；自定义组件需按框架约定class或data属性查找；Shadow DOM内需通过shadowRoot访问。
在 JavaScript 中，查询页面中所有的下拉菜单节点，通常是指获取所有 <select> 元素——因为 HTML 中标准的下拉菜单就是通过 <select> 标签实现的（包括单选和多选）。
使用 document.querySelectorAll 获取全部 select 元素
这是最常用、最直接的方式：
const dropdowns = document.querySelectorAll('select');
它返回一个 NodeList，包含页面中所有 <select> 节点（无论是否隐藏、是否禁用、是否在 shadow DOM 内）。如果需要转为数组以便使用 map、filter 等方法，可以这样写：
Array.from(document.querySelectorAll('select'))[...document.querySelectorAll('select')]
只选“可见且可用”的下拉菜单
有时你只想操作用户实际能交互的下拉框，可加 CSS 伪类或属性筛选：
立即学习“Java免费学习笔记（深入）”；
- 排除被禁用的：
document.querySelectorAll('select:not([disabled])') - 排除不可见的（需注意：
:visible不是原生 CSS 伪类，但可用 JS 判断）：Array.from(document.querySelectorAll('select')).filter(sel => !sel.hidden && getComputedStyle(sel).display !== 'none' && getComputedStyle(sel).visibility === 'visible')
兼容自定义下拉组件（如基于 div 的模拟 select）
很多 UI 框架（如 Element Plus、Ant Design）用 <div> + <ul> 实现下拉效果。这类不是原生 <select>，需按其约定的 class 或属性查找，例如：
- Element Plus：
document.querySelectorAll('.el-select') - Bootstrap Select：
document.querySelectorAll('[data-toggle="select"]') - 通用做法：统一加自定义 data 属性，比如
<div data-role="dropdown">，再查document.querySelectorAll('[data-role="dropdown"]')
注意 Shadow DOM 中的下拉菜单
如果页面用了 Web Components 且下拉菜单在 shadow root 里，document.querySelectorAll('select') 默认查不到。需要遍历 shadow roots：
- 简单情况：已知组件选择器，如
document.querySelector('my-custom-select').shadowRoot.querySelectorAll('select') - 复杂情况：需递归遍历所有 shadow roots（一般项目中较少需要全量扫描）
不复杂但容易忽略：原生下拉菜单就是 <select>，优先查它；定制化组件要靠约定或文档确认标识方式。
