如何用getElementsByClassName获取父元素的直接子元素？

这个坑我之前踩过！getElementsByClassName的特性就是会递归查找当前元素下所有层级的匹配类名元素，所以才会把嵌套在.content里的那个子元素也一起捞出来。给你几个靠谱的解决办法：

方法1：遍历直接子元素筛选 #

先拿到父元素的所有直接子元素集合，再手动筛选出类名为content的项：

const parentElement = document.querySelector('.parent');
const directChildrenContents = [];

// 遍历父元素的所有直接子元素
for (const child of parentElement.children) {
  if (child.classList.contains('content')) {
    directChildrenContents.push(child);
  }
}

console.log(directChildrenContents); // 仅返回2个直接子元素

方法2：用querySelectorAll配合:scope选择器（推荐） #

这是最简洁的写法，利用CSS直接子选择器>加上:scope限定上下文，精准匹配父元素的直接子元素：

const parentElement = document.querySelector('.parent');
const directChildrenContents = parentElement.querySelectorAll(':scope > .content');

console.log(directChildrenContents); // 返回目标的2个直接子元素

这里的:scope表示以当前parentElement作为选择器的上下文，避免了全局查找，完美避开嵌套的子元素。目前主流浏览器（Chrome、Firefox、Edge）都支持这个特性。

方法3：从getElementsByClassName结果中过滤 #

如果一定要坚持用getElementsByClassName，可以手动过滤出父节点正好是目标父元素的项：

const parentElement = document.querySelector('.parent');
const allContents = parentElement.getElementsByClassName('content');

// 把HTMLCollection转换成数组后过滤
const directChildrenContents = Array.from(allContents).filter(item => item.parentNode === parentElement);

console.log(directChildrenContents); // 得到2个直接子元素

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