使用this或event.currentTarget时如何导航获取DOM子元素

你拿到的this（事件绑定场景下指向触发事件的DOM节点）、event.currentTarget本质都是标准DOM元素对象，可直接通过以下内置属性/方法访问子元素：

常用子元素访问API #

• 访问所有直接子元素：使用children属性，返回仅包含元素节点的HTMLCollection集合，可直接通过索引取值，示例：const firstChild = this.children[0]
• 快速获取首尾直接子元素：分别使用firstElementChild、lastElementChild属性，无需手动计算索引，示例：const lastChild = event.currentTarget.lastElementChild
• 获取包含文本、注释等所有类型的子节点：使用childNodes属性，返回包含所有子节点的NodeList集合，注意会包含换行、空格产生的空白文本节点
• 按选择器筛选任意层级后代元素：直接在当前节点上调用querySelector()（返回第一个匹配的元素）、querySelectorAll()（返回所有匹配元素的集合），查询范围仅限当前节点内部，示例：const formItems = this.querySelectorAll('.form-item')

注意：如果只需要操作普通HTML元素，优先使用带Element后缀的API，可以避免空白文本节点干扰后续逻辑

相关学习方向 #

1. 先理清DOM节点的分类差异，明确元素节点、文本节点、注释节点的区别，就能准确区分children和childNodes的适用场景
2. 系统学习Node和Element两个基础DOM接口的内置属性、方法，绝大多数DOM导航相关的API都定义在这两个接口中
3. 可通过小demo验证不同API的返回结果，比如给同一个父节点添加不同类型的子内容，分别打印相关属性返回值对比差异

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