已选中HTML元素后，如何通过ID获取目标子元素？

嘿，我完全懂你碰到的这个坑！getElementById() 这个方法只能通过document对象调用，普通的元素节点本身并没有这个方法，所以你直接用toolbarAreaElement.getElementById('3')才会弹出undefined的错误提示。

那正确的处理方式是什么呢？其实很简单，用querySelector()方法就能搞定——它支持在指定元素的范围内查找匹配的CSS选择器，包括ID选择器：

// 先获取父级容器元素
const toolbarAreaElement = document.getElementById('toolbarArea');
// 在父元素的子树范围内，查找ID为"3"的元素
const targetElement = toolbarAreaElement.querySelector('#3');

为什么这个方法可行？因为querySelector()是元素节点自带的方法，它会在当前元素的所有子节点（包括自身）里，找到第一个匹配指定CSS选择器的元素。这里的#3就是标准的ID选择器，对应你要找的ID为3的元素。

额外补充一句：虽然HTML规范里要求ID在整个文档中必须唯一，但如果你就是想限定在某个父元素范围内查找目标，querySelector()绝对是最简洁高效的方式。要是你更习惯用其他方法，也可以结合getElementsByTagName()或getElementsByClassName()做筛选，但显然querySelector()的写法更直观。

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