第十二章：第28节DOM——节点的访问（二）使用方法访问
更新于：2017-11-11 22:57:08
上节内容中，DOM节点的访问是靠节点与节点之间的层级关系，从大依次往小了找。这种查找方式不好，
如果层级非常深的话，那么操作起来非常烦琐。HTML标签只要稍微改动（换行），JS就会出错，代码的可用性也很差。
这种方式就好比是学校里每个学生用“几年级几班几排几列”做身份标识，繁琐。假如学生换了位子或班级，身份标识即失效。如果每个学生用一个唯一的ID号做身份标识，是不是更好些呢。
前面我们学习CSS时有所了解，HTML标签可以设置ID属性的，它可作为CSS的ID选择器。这个ID在JS中也有很重要的作用，document对象通过“getElementById”方法可以获取指定ID号的节点对象。
document.getElementById()
功能：获取网页中指定id的对象
语法：document.getElementById(id)
参数：id是指HTML标记中，某个元素的id属性的值
提示：getElementById()方法兼容性最好，所有浏览器都支持。是最常用的节点访问方式。
还是上节的HTML页面
edit函数换成“document.getElementById()”方式获取节点，依然可实现同样的效果。
用“document.getElementById()”方式的好处：获取节点简单直接，与层级没有关系。只要HTML标记的ID号是唯一的、不变的，页面其他标记无论怎么变化都不会被影响。
直接通过ID访问节点固然很好，不过我们也不可能给每个HTML标签都加一ID号，这样会增加HTML页面的大小，会增加工作量。最好是：“getElementById”方法配合着其他的方法和属性完成节点访问。
又一方法：
getElementsByTagName()等同于核心DOM中的childNodes
功能：获取指定标记的一个列表，将返回一个数组。
语法：parentNode.getElementsByTagName(tagName)
参数：tagName是标记名称，不带尖括号
parentNode一定是一个父节点。
举例：var arr_li = ulObj.getElementsByTagName(“li”)
getElementsByTagName()方法访问可取代childNodes属性访问。
上面两种方法是最常用的访问方法，再说一方法：
document.getElementsByName()
功能：获取网页中有指定名称的对象的集合
语法：document.getElementsByName(name)
参数：name是指HTML标记中，某个元素名称
提示：有浏览器兼容问题,通常应用在form表单里边。
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
26行代码返回的是数组，这个数组继承了NodeList对象。