如何选择名称动态变化的DOM元素？QuerySelector通配符用法

针对ID中包含动态变化部分的DOM元素，可以使用属性前缀匹配选择器来定位，具体方案如下：

• 使用[id^="menu-"]选择器匹配所有ID以menu-开头的元素，替换原选择器中固定的动态ID部分
• 组合后的完整选择器代码：

  document.querySelector('[id^="menu-"] > div:nth-child(1) > button > span.Typography-module__lVnit.Typography-module__Nfgvc.Button-module__Imdmt')
  

补充说明 #

如果页面中存在多个ID以menu-开头的元素，建议结合元素的其他特征（比如父元素的属性、自身的class等）进一步缩小范围，避免误选。例如可以增加父容器的筛选条件，或者检查元素的其他固定属性。

内容的提问来源于stack exchange，提问作者Walter Schrabmair