原生JS常用的4种获取元素方法分别是：

getElementById( )

返回的是一个dom对象（第一个输出）

而getElementsByClassName( )、getElementsByTagName( )、getElementsByName( )

返回的是元素集合（第二、三、四个输出）

那么，这返回的两种东西有什么区别呢？

## dom对象可以通过dom属性里的获取子节点属性，来操作其子元素（其他元素节点也一样），参照图三

## 元素集合是不可以操作节点的，因为返回来的不是dom对象，而是一个HTMLCollection对象，是一个包含着dom的对象，集合可以通过索引index来获取集合中的某一元素进行操作，如：

图一

到这里，有人可能会觉得奇怪不是说好的元素集合不能操作子节点吗？而且为什么还要在获取元素那里加个 "[0]" 这玩意呢？

这又涉及到了HTMLCollection对象转dom对象的知识了，看下面的例子：

图二

获取的这两个东西都是同个元素，不同的是一个为HC(简写)对象，一个是dom对象，鹅HC转DOM就是在后面加个 "[×]" 

那dom对象转HC对象呢？

其实上面也说了dom属性获取节点元素，返回的就是一个元素集合，参照图五

ps : ××.children跟××.children[0]是不一样的，前者是dom对象，后者是集合

那元素集合是真的不能操作元素节点吗？？我们先看下面一个例子：

图三

这里说的是gnclass.children[0]有问题，undefined，就是没定义获取不到

这个报错可能有点不明了，可以用第一张图的代码稍微修改一下，来看一看结果是什么

图四

第一个输出结果其实就是DOM转HC

其他输出都是undefined，就证明完全获取不到，根本没有这个东西

从上面可以得出一个结论：

元素集合不可以操作dom节点

所以有几点是需要注意一下的（纯属本人心得..）：

1.dom对象只要用了dom属性里操作节点的属性，返回的对象就会是集合对象(HTMLCollection)，而不是dom对象

2.集合对象加了索引，返回的就是dom对象

下面是源码