当元素 ID 中部分字符串随机变化（如 menu-v15rco8kc2）时，无法用通配符 * 直接匹配，但可通过 CSS 属性选择器（如 [id^='menu-']）按前缀、后缀或子串灵活定位目标元素。
当元素 id 中部分字符串随机变化（如 `menu-v15rco8kc2`）时，无法用通配符 `*` 直接匹配，但可通过 css 属性选择器（如 `[id^='menu-']`）按前缀、后缀或子串灵活定位目标元素。
在现代前端开发中，服务端渲染（SSR）或构建工具（如 Webpack、Vite）常为类名或 ID 注入哈希值，导致静态选择器失效。例如：
<div id="menu-v15rco8kc2">
<div>
<button>
<span class="Typography-module__lVnit Typography-module__Nfgvc Button-module__Imdmt">
Submit
</span>
</button>
</div>
</div>
其中 v15rco8kc2 是每次构建/加载时动态生成的哈希片段，传统写法 #menu-v15rco8kc2 将失效。
✅ 正确解法是使用 CSS 属性选择器，它支持三种常用模式：
-
[attr^="value"]：匹配属性值以指定字符串开头（最常用，适用于 ID 前缀固定场景） -
[attr$="value"]：匹配属性值以指定字符串结尾（适合后缀可预测的情况） -
[attr*="value"]：匹配属性值包含指定子串（灵活性高，但性能略低，慎用于高频操作）
针对本例，推荐使用前缀匹配：
// ✅ 精准匹配所有以 "menu-" 开头的 ID
const btnSpan = document.querySelector(
"[id^='menu-'] > div:nth-child(1) > button > span.Typography-module__lVnit.Typography-module__Nfgvc.Button-module__Imdmt"
);
if (btnSpan) {
btnSpan.addEventListener('click', () => {
console.log('Dynamic menu button clicked!');
});
} else {
console.warn('Dynamic menu element not found.');
}
⚠️ 注意事项：
- 属性选择器区分大小写（HTML 中 ID 默认不区分，但严格模式下建议保持一致）；
- 若页面存在多个
id^='menu-'元素，querySelector仅返回第一个匹配项；需获取全部时请改用querySelectorAll并结合逻辑过滤； - 避免过度依赖
*=（包含匹配），可能误命中无关元素（如id="submenu-test"也会被[id*='menu']匹配）； - 对于更复杂的动态场景（如多级哈希类名），建议配合
data-*自定义属性（如<div data-menu-root>）提升可维护性与语义性。<p>总结：放弃“通配符”幻想，拥抱标准 CSS 属性选择器——它原生、高效、无需额外库，是处理动态 DOM 定位的首选方案。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
