如何选取指定class的所有DOM元素并按兄弟节点关系分组

示例DOM结构如下：

<div class="main-div">
    <div class="get-this"></div>
    <div class="get-this"></div>
    <div class="get-this"></div>
    <div class="sub-div">
        <div class="get-this"></div>
        <div class="get-this"></div>
    </div>
</div>
<div class="get-this"></div>
<div class="get-this"></div>
<div class="get-this"></div>

需求为获取所有class为get-this的元素，无需额外给元素分配独立class，即可按直接父节点分组遍历，分别得到：main-div下的直接子元素组、sub-div下的直接子元素组、最外层同级的元素组，替代手动全量递归遍历DOM的复杂实现。

不需要手写递归遍历全DOM，直接用浏览器原生API两步就能完成，性能远高于手写遍历逻辑：

1. 用原生选择器一次性拿全所有目标元素，querySelectorAll是浏览器底层优化过的方法，不需要自己写节点遍历逻辑
2. 以元素的直接父节点parentNode为分组标识，把拿到的元素归类即可

核心实现代码：

// 获取所有目标元素
const targetElements = document.querySelectorAll('.get-this');
const groupResult = new Map();

targetElements.forEach(el => {
  const parentEl = el.parentNode;
  // 对应父节点的分组不存在就新建
  if (!groupResult.has(parentEl)) {
    groupResult.set(parentEl, []);
  }
  // 元素推入对应父节点的分组
  groupResult.get(parentEl).push(el);
});

最终得到的groupResult里，每一项的value就是一组同父节点的目标兄弟元素：

• key为main-div节点时，对应数组是它下的3个直接子级get-this元素
• key为sub-div节点时，对应数组是它下的2个直接子级get-this元素
• key为外层元素的直接父节点（通常是body）时，对应数组是最外层3个同级的get-this元素

遍历分组时直接遍历groupResult.values()即可，拿到的每个数组就是一组可以单独处理的兄弟元素集合，全程不需要给元素加额外class，也不需要复杂的DOM递归逻辑。

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