从使用方式看
这几个方法和属性都通过‘.’操作符访问，‘.’左边是范围，右边是属性，比如：
const $section = document.getElementById("section") // 从整个页面范围内获取id为“section”的div。
const $span = $section.getElementsByTagName(“span”) // 从id为“section”的div中获取所有标签名为“span”的元素节点。 const $sectionChild = $section.childNodes // 获取id为“section”的div的所有子节点。 从函数名看
函数名起的很直白，一眼就能看出来getElementById()是通过id名称来获取、getElementsByTagName()是通过标签名称（TagName）来获取，这两者有个不起眼的区别——Element后有无‘s’——这决定了返回值。
- Element后没有‘s’，因为一个页面中只有一个id，所以只返回一个DOM节点。
- Element后有‘s’，代表着返回值至少有一个DOM节点，因为一个页面中同名标签不止一个。
相同的，childNodes和parentNode也是一样，一个节点至少有一个子节点，至多一个父节点，参考父子关系～
但querySelector和querySelectorAll的区别是那个All了，前者是一个，后者是所有
从参数看
首先参数类型都是字符串类型，需要注意的是querySelector和querySelectorAll，它们像jq的$()一样强大，不局限于id或者TagName，传入的参数和css选择器一样，需要查找id为section的div时，不能像getElementById()一样传入“section”就行了，得加上个‘#’说明是通过id查询，相同的通过class也是一样，得加上一个‘.’。
在这次的任务中有一个需求是获取class=“active”的a标签，利用querySelector可以很容易实现
const $aActive = document.querySelector("a.active")
就像写css选择器一样方便～
从返回值看
-
当返回的DOM节点至少有一个时，它的返回值是一个类数组对象，什么是类数组对象呢？先看看类数组对象长什么样子：
{ 0: "a", 1: "b", 2: "c", 4: "e", length: 5, }类数组对象的定义，就是拥有一个 length属性和若干索引属性的对象。碰巧获取DOM节点返回的类数组对象的key是从0开始的，我们可以很方便的使用for循环对类数组对象像遍历数组一样进行遍历，只是无法直接使用数组的方法，比如map()，push()等，不然就会报错。不过可以通过Function.call()间接使用，或者转化成真正的数组来使用。
-
如果使用querySelector()获取至少一个的DOM的节点，将只返回页面中符合要求的第一个DOM节点。
-
需要特别注意的是childNodes返回的内容。首先我们要明确几种常见的节点类型：
- 元素节点
- 属性节点
- 文本节点
- ......
在一些浏览器中比如chorme，空格、回车会被认为是一个文本节点——text，比如下面片段的div中就应该含有个5子节点——3个文本节点、2个元素节点：
<div> // 这里有个回车
<span>sss</span> // 这里有个回车 <p>aaa</p> // 这里也有个回车 </div>