JS实现HighlightJS复制按钮报querySelector错误，如何为代码块绑定剪贴板事件

所有报错的触发原因没有复杂逻辑，全是基础疏漏：

• 行号插件DOM定位逻辑错误：highlightjs-line-numbers插件渲染的行号结构不存在所谓的tbody节点，针对不存在的DOM节点调用querySelector，自然抛出Cannot read property 'querySelector' of undefined
• 变量作用域混乱：codeBlock、copySuccess、copyButton全是在全局作用域零散定义的，循环遍历代码块的时候没有在单次迭代内声明对应变量，导致绑定事件时拿到的全是未定义值
• 执行时机错误：复制逻辑的代码跑在HighlightJS、行号插件渲染完成之前，遍历DOM的时候根本找不到已经初始化好的代码块节点

完全适配当前技术栈（HighlightJS 10.6.0 + line-numbers 2.6.0），不需要引入第三方库：

1. 先确保所有脚本执行顺序正确：先加载HighlightJS、行号插件，再加载复制功能的JS逻辑，不要在DOM没渲染完的时候提前执行遍历
2. 核心实现代码：

// 等页面DOM、所有插件渲染完成后再执行绑定
window.addEventListener('load', () => {
  // 匹配所有已经初始化好的HighlightJS代码块容器
  const allCodeBlocks = document.querySelectorAll('.hljs');

  allCodeBlocks.forEach(block => {
    // 每个循环迭代内单独声明变量，杜绝全局变量污染
    const originCode = block.querySelector('code.hljs');
    if (!originCode) return;

    // 提取纯代码内容，复用已有的空行清理逻辑，同时过滤行号插件生成的辅助内容
    const copyContent = originCode.innerText.replace(/\n{3,}/g, '\n\n');

    // 给每个代码块单独创建复制按钮
    const copyButton = document.createElement('button');
    copyButton.innerText = '复制代码';
    copyButton.style.cssText = `
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      z-index: 10;
    `;
    block.style.position = 'relative';
    block.appendChild(copyButton);

    // 单独绑定每个按钮的点击事件
    copyButton.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(copyContent);
        copyButton.innerText = '复制成功';
        copyButton.disabled = true;
        setTimeout(() => {
          copyButton.innerText = '复制代码';
          copyButton.disabled = false;
        }, 2000);
      } catch (err) {
        copyButton.innerText = '复制失败';
        setTimeout(() => copyButton.innerText = '复制代码', 2000);
      }
    })
  })
})

• 不需要手动去匹配行号插件生成的DOM节点，提取代码内容时只要锁定code.hljs标签本身的文本就行，行号是插件动态渲染在辅助span里的，不会混进code标签的纯文本中
• 不要给按钮加全局类名后批量绑定事件，要在循环每个代码块的时候单独创建、单独绑定，不然会出现所有按钮都操作同一个代码块的问题
• 如果遇到旧浏览器不支持navigator.clipboard接口的情况，在catch逻辑里补一段降级复制的兼容代码即可，不需要引入额外第三方库

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