动态创建按钮绑定事件时为何仅作用于对应单个关联元素？

你出现认知偏差，核心是混淆了querySelector的查询根节点作用域差异，代码里的逻辑完全没有违背DOM操作的基本规则。

• 你之前认知里“选中元素后操作会作用于所有符合条件的元素”的场景，有两个隐含前提：
  • 用document.querySelectorAll()选中所有匹配节点（如果用document.querySelector()本来就只会返回全局匹配的第一个节点，不会拿到全部元素）
  • 查询的根节点是全局document，作用范围覆盖整个页面DOM
• 你代码里的所有元素查询，从来没有把document作为查询根节点：
  每次map循环执行时，都会先创建一个完全独立、还没挂载到页面上的newArticleDOM片段，这个片段自带独立的DOM树结构，和其他循环生成的片段、已挂载的页面DOM都是隔离的：

  // 在当前独立的newArticle片段内部查询button，拿到的是这个片段专属的按钮
  let myBtn = newArticle.querySelector('button');
  // 给这个专属按钮绑定点击事件
  myBtn.addEventListener('click', (e) => {
      // 依然是在当前这个独立的newArticle片段内部查询span
      newArticle.querySelector('span').innerHTML = 'clicked';
  })
  

• 为什么点击按钮只会修改同组的span？
  每一次循环都会生成独立的闭包，每个闭包都捕获了当次循环对应的专属newArticle引用：
  第一次循环生成的article，内部按钮触发点击时，只会操作闭包里存的这一个article下的span；第二次、第三次循环生成的article同理，所有节点引用都是相互隔离的，自然不会跨组修改其他article里的内容。
• 可以做个简单验证匹配你的原有认知：
  如果把点击事件回调里的代码改成全局查询：

  // 全局找第一个span
  document.querySelector('span').innerHTML = 'clicked'
  // 或全局找所有span批量修改
  document.querySelectorAll('span').forEach(span => span.innerHTML = 'clicked')
  

  此时的操作就会符合你之前的预期，因为查询根节点已经从局部的newArticle换成了全局的document。

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