document.querySelector查询动态href对应按钮返回undefined怎么办

你的选择器返回undefined是三个写法问题叠加导致的：

• 属性选择器的匹配值未加引号：a[href*=${itemName}]渲染后为a[href*=Fancy-item-name]，带横杠的属性值没有引号包裹时，CSS解析器会把横杠识别为标识符分隔符，直接导致选择器语法失效。
• 相邻兄弟选择器使用错误：+选择器只能匹配和当前元素**完全紧邻、中间不存在任何其他节点（含空白文本、注释节点）**的兄弟元素。你的HTML里a标签和div.ugly-class-wrapper之间存在换行缩进产生的空白文本节点，+无法匹配到目标div。
• 最终目标元素写错：你需求是找second-button，但选择器最后写的是div.first-button，就算前面匹配对了也拿不到目标按钮。

用CSS选择器直接查询的最简方案：

const itemName = "Fancy-item-name";
// 注意属性值加双引号、+替换为通用兄弟选择器~、修正最终目标按钮类名
const targetButton = document.querySelector(`a[href*="${itemName}"] ~ div.ugly-class-wrapper > div.second-ugly-class > button.second-button`);
// 判空后执行点击，避免元素不存在时报错
targetButton?.click();

nextSibling会返回相邻的所有类型节点，包括空白文本、注释，你a标签后第一个相邻节点是换行产生的空白文本节点，自然拿不到后面的div。如果想用DOM遍历的方式实现，要改用只会匹配元素节点的nextElementSibling：

const itemName = "Fancy-item-name";
const anchor = document.querySelector(`a[href*="${itemName}"]`);
if (anchor) {
  const wrapper = anchor.nextElementSibling;
  const btn = wrapper?.querySelector("div.second-ugly-class > button.second-button");
  btn?.click();
}

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