求助：实现onlineyoga.ch网站“Mehr anzeigen”按钮自动点击的JS方案

原代码问题分析 #

你写的代码返回undefined是因为选择器写法错误：document.querySelector('.button.left ds-button')里的空格会被解析为后代选择器，而非同时匹配多个类名。正确的多类选择器应该用点连接，比如.button.left.ds-button。另外，按钮可能是页面加载后动态生成的，DOMContentLoaded事件触发时元素还未渲染完成，导致找不到按钮。

可行实现方案 #

方案1：定时轮询（简单易上手）

通过定时检查按钮是否存在，找到后立即点击，适合按钮加载延迟不高的场景：

function autoClickLoadMore() {
  // 修正后的多类选择器
  const loadMoreBtn = document.querySelector('.button.left.ds-button');
  
  if (loadMoreBtn) {
    loadMoreBtn.click();
    console.log("「Mehr anzeigen」按钮已自动点击");
    
    // 可选：如果需要自动加载所有内容，递归调用继续检查
    // setTimeout(autoClickLoadMore, 1500); // 1.5秒后再次检查，避免请求过于频繁
  } else {
    // 未找到按钮，1秒后重试
    setTimeout(autoClickLoadMore, 1000);
  }
}

// 页面完全加载后启动轮询（比DOMContentLoaded更保险，等待资源加载完成）
window.addEventListener('load', autoClickLoadMore);

方案2：MutationObserver监听DOM变化（高效精准）

如果按钮是通过AJAX动态插入的，用DOM变化监听可以在按钮出现瞬间触发点击，性能更优：

// 先找到按钮的父容器（右键按钮→检查元素，向上找稳定的父节点，比如课程列表容器）
const parentContainer = document.querySelector('.programs-container'); // 替换为实际父容器选择器

// 创建DOM变化监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有新节点添加
    if (mutation.addedNodes.length > 0) {
      const loadMoreBtn = document.querySelector('.button.left.ds-button');
      if (loadMoreBtn) {
        loadMoreBtn.click();
        console.log("「Mehr anzeigen」按钮已自动点击");
        
        // 可选：只需要点击一次的话，停止监听
        // observer.disconnect();
      }
    }
  });
});

// 配置监听选项：监听子节点变化，包括子树
observer.observe(parentContainer, { childList: true, subtree: true });

// 页面加载后先主动检查一次
window.addEventListener('load', () => {
  const loadMoreBtn = document.querySelector('.button.left.ds-button');
  if (loadMoreBtn) {
    loadMoreBtn.click();
    console.log("「Mehr anzeigen」按钮已自动点击");
  }
});

测试方法 #

1. Chrome控制台快速验证：

   • 打开目标课程页面，按F12打开开发者工具，切换到Console标签
   • 复制上述任意一段代码粘贴到控制台，按回车执行
   • 查看控制台输出日志，同时观察页面是否自动加载更多课程内容

2. 验证选择器准确性：
   在控制台输入document.querySelector('.button.left.ds-button')，如果返回<button>元素对象说明选择器正确；如果返回null，右键按钮→检查元素，查看按钮的class属性，修正选择器（比如类名是否有拼写错误、是否有额外的类）

注意事项 #

• 如果按钮点击后会自动隐藏（所有内容加载完成），记得去掉递归调用或停止监听，避免无效轮询
• 轮询间隔不要设置过短（建议1秒以上），减少对页面性能的影响
• 第三方软件的类名可能会更新，定期检查按钮的class属性是否变化

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