在这次的项目里，我在用JS做轮播图时出现了一个问题，控制台一直报错说children未定义，但我的程序里children是一个方法，在检查了其他部分无果后，我以为是html结构的问题导致程序没有有效找到子元素，于是用二分法进行注释，也没有找到问题的所在。最终，仔细研究了JS里children这个方法，我找到了问题的所在。

首先，children这个方法是获取一个DOM所有子元素的集合，在轮播图中，我们可以对整体部分用一个盒子包住，利用children这个方法获取这个盒子所有的子元素（即每一张图片），然后用遍历的方法处理每一张图片，达到轮播图的效果。因为children这个方法会自动根据每个元素在HTML中出现的顺序进行排序，我们可以利用索引访问每一个元素在这一点上它相当于一个数组；包含所有子元素节点；同时，children对于节点的获取是实时更新的，也就说如果我们在使用这个方法后，元素节点发生了改变，children是可以实时捕获这个改变的。

注意，children和childNode方法都是获取子节点，但他们有所区别，children会自动获取所有节点，包括文本和注释；children只返回元素节点，返回元素节点的方法还有。querySelectorAll，可以返回指定类名（选择的必须是class属性）的所有节点。

另外，children只返回子节点，不会返回孙节点。

那么说了这么多，问题究竟出在哪里呢？为什么浏览器会把children这个方法看成一个变量报错呢？

这是因为HTML是有执行顺序的，在处理时会先处理前面的代码，而我习惯上把script代码写在最上面，但事实上这是一个不好的习惯，一方面，浏览器会先加载脚本文件，导致图形界面加载速度变慢，影响用户体验；另一方面，对于children这种方法也会产生一个问题，就是在执行脚本文件时后面的HTML代码并没有执行，这时浏览器是无法获取到子节点的，所以就会把这个children当成变量执行，就会报错。所以解决方法很简单，就是把外联JS放到HTML的最后面，让它在前面的文件执行完毕后再执行，这样就能获取到子节点了。