js获取div下的子元素-JavaScript DOM操作：三种方法对比，你用哪种？

作为一名前端开发工程师，我经常需要使用JavaScript来操作DOM元素。其中，获取div下的子元素是一个非常常见的需求。在这篇文章中，我将对比并评测了三种不同的方法来实现这个功能。

方法一：使用querySelectorAll

querySelectorAll是一个非常强大的方法，它可以通过CSS选择器来获取DOM元素。对于获取div下的子元素，我们可以使用以下代码：

const parentDiv = document.querySelector('#parentDiv');
const childElements = parentDiv.querySelectorAll('div');

这种方法非常简洁明了，而且代码量很少。它返回一个NodeList对象，我们可以通过遍历这个对象来访问每个子元素。

方法二：使用childNodes

childNodes是一个属性，它返回一个包含所有子节点的集合。对于获取div下的子元素，我们可以使用以下代码：

const parentDiv = document.getElementById('parentDiv');
const childElements = parentDiv.childNodes;

这种方法也比较简单，但需要注意的是childNodes返回的是一个包含所有类型的节点（包括文本节点和注释节点）的集合，所以我们还需要进行一些额外的处理来过滤出我们需要的子元素。

方法三：使用children

children是一个属性，它返回一个只包含元素节点（Element）的集合。对于获取div下的子元素，我们可以使用以下代码：

const parentDiv = document.getElementById('parentDiv');
const childElements = parentDiv.children;

这种方法非常简洁，而且返回的是一个HTMLCollection对象，我们同样可以通过遍历这个对象来访问每个子元素。

对比评测：

whatsapp官方下载中文版：https://zflyjj.com/danji/18542.html