如何仅选择父div的直接子div而非所有子级div？

你当前使用parent.querySelectorAll('div')会匹配父元素所有层级的div节点（包括嵌套在子元素里的后代div），所以返回了大量非预期节点。要只选父元素的直接子div，有以下几种可靠方法：

方法一：使用:scope伪类结合子选择器 #

:scope代表调用querySelectorAll的元素本身，配合子选择器>可以精准定位直接子元素：

var parent = document.querySelector('.parent');
var wantedChildren = parent.querySelectorAll(':scope > div');
console.log(wantedChildren); // 仅返回父元素下的3个直接子div

这个方法语法简洁，现代主流浏览器都支持，是首选方案。

方法二：利用children属性过滤 #

parent.children只返回父元素的直接子元素节点（不包含文本节点、注释节点等），再通过过滤筛选出div标签：

var parent = document.querySelector('.parent');
var wantedChildren = Array.from(parent.children).filter(child => child.tagName === 'DIV');
console.log(wantedChildren);

如果需要兼容更老的浏览器（比如IE），可以用循环代替Array.from：

var parent = document.querySelector('.parent');
var wantedChildren = [];
var children = parent.children;
for (var i = 0; i < children.length; i++) {
  if (children[i].tagName === 'DIV') {
    wantedChildren.push(children[i]);
  }
}
console.log(wantedChildren);

方法三：依赖子元素类名（可选） #

如果你的直接子div都有统一的类名（比如示例中的wantedChild），也可以直接通过类名选择：

var parent = document.querySelector('.parent');
var wantedChildren = parent.querySelectorAll('.wantedChild');
console.log(wantedChildren);

不过这个方法依赖固定类名，通用性不如前两种。

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