js获取div下的子元素-前端工程师必备：querySelectorAll vs children，谁更胜一筹？

今天，我作为一名前端工程师，将给大家带来一场精彩绝伦的js获取div下的子元素的评测对比。相信大家在开发过程中都会遇到这个问题，那么我们就来看看如何事半功倍地解决这个难题吧！

方法一：使用querySelectorAll

querySelectorAll是一个强大的方法，它可以通过CSS选择器来获取满足条件的所有元素。只需要传入相应的选择器字符串即可，非常方便。例如，如果我们想获取id为"container"下所有class为"item"的子元素，可以这样写：

javascript
var items = document.querySelectorAll("#container .item");

不仅如此，querySelectorAll还支持复杂的选择器组合和层级关系，灵活性非常高。

方法二：使用children属性

children属性是DOM元素对象自带的属性之一，它返回一个包含所有子元素的HTMLCollection对象。我们可以通过遍历HTMLCollection来获取每个子元素。例如：

javascript
var container = document.getElementById("container");
var items = container.children;
for (var i =0; i < items.length;i++){
    // do something with each item

虽然children属性很方便，但它只返回直接子元素，不包含孙子元素。如果你只需要获取直接子元素，那么它是一个不错的选择。

方法三：使用childNodes属性

childNodes属性也是DOM元素对象自带的属性之一，它返回一个包含所有子节点的NodeList对象。和children属性不同的是，childNodes会包含所有类型的节点，不仅仅是元素节点。

whatsapp官方下载中文版：https://jxcnpw.com/sjyx/19458.html