如何通过event.target选择事件目标的同级div.effect元素？

你提到的document.querySelector(event.target + " + .effect")写法不可行，因为event.target是DOM元素对象，不是字符串，无法直接和选择器字符串拼接。以下是仅通过event.target获取同级.effect元素的几种可靠方法：

• 利用兄弟元素关系（适合固定DOM结构）
  由于在你的HTML里，按钮是.effect的下一个兄弟元素，直接使用previousElementSibling就能拿到目标元素：

  const effectEl = event.target.previousElementSibling;
  

  注意：如果后续DOM结构调整（比如按钮和.effect之间插入了其他元素），这种方法会失效。

• 通过父节点查询（更健壮的方案）
  先获取按钮的父容器.item，再在容器内查询.effect元素，这种方法不受兄弟元素顺序或中间插入元素的影响：

  const effectEl = event.target.parentNode.querySelector('.effect');
  

• 用closest定位父容器（兼容复杂嵌套场景）
  如果未来.item的嵌套层级可能变化，还可以用closest先精准定位到父容器，再查询目标元素：

  const effectEl = event.target.closest('.item').querySelector('.effect');
  

以上三种方法均仅依赖event.target，不需要给元素添加ID、自定义属性或其他变通方案，完全符合你的需求。

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