动态创建的article元素上调用querySelector如何定位对应内部按钮？

问题1：点击编辑按钮时如何识别所属清单项 #

有两种常用的实现方式：

• DOM 层级查找法
  给编辑按钮绑定点击事件后，在事件回调中通过事件对象向上查找所属的清单项元素即可：

  editBtn.addEventListener('click', (e) => {
    // closest方法会从当前元素开始向上找第一个匹配选择器的父元素
    const currentGroceryItem = e.currentTarget.closest('.grocery-item')
    // 读取你提前设置的data-id属性，就能唯一识别这个清单项
    const currentItemId = currentGroceryItem.dataset.id
    // 后续基于currentItemId或者currentGroceryItem做编辑逻辑即可
  })
  

• 闭包绑定法
  你创建每个article元素、每个editBtn的代码都在对应单个清单项的独立作用域内运行，绑定事件时直接引用当前作用域下的id、element变量即可，天然和当前清单项绑定，不会和其他项混淆。

问题2：element.querySelector为什么不会选到其他article的编辑按钮 #

querySelector的搜索范围完全由调用它的主体决定：

• 只有在document对象上调用querySelector时，才会遍历整个页面DOM树查找匹配元素
• 在普通DOM元素实例上调用querySelector时，只会在该元素的后代节点范围内搜索，完全不会触及元素外部的DOM节点

你这里每次执行const editBtn = element.querySelector(".edit-btn");时，element都是刚创建的、对应单个清单项的article元素，自然只会选中它自己内部的编辑按钮，和其他article下的按钮完全隔离，不需要额外写筛选所有article的逻辑。

表述优化建议 #

你的问题描述逻辑清晰、上下文代码完整，已经足够定位问题。如果要进一步完善可以补充两个信息：

• 批量创建多个清单项是否是用循环实现的相关代码
• 你目前是否已经给编辑按钮编写了事件绑定逻辑的代码片段

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