JS的DOM对象
DOM对象：
（一）简介
DOM对象：即文档对象模型，是HTML和JavaScript的桥梁
Document文档 —— 整个HTML文档
Object对象 —— 一切皆对象
Model模型 —— 可理解为模具，做不同形状蛋糕
（1）将一个HTML文档按照由外及内，从大到小的去看，可以分为4个层面的节点（本文中所说节点都是对象）
|
① 文档节点 |
② 标签节点 |
③ 属性节点 |
④ 文本节点 |
可以看这张图：其实图中第三行的 标签，如img标签、a标签，p标签里面还可以有属性，是属性节点，
<a>文本</a>里面包含的文本，也是文本节点；
（二）查找DOM节点方式
1.通过id属性查找节点对象（注：element单数）
var oImg = document.getElementById('img');
2.通过标签名查找节点对象（注：复数的elements）注意是数组
var oImg = document.getElementsByTagName('img');
var oImg[0].src = "./1.png";
3.通过name属性查找节点对象（注：复数的elements）注意是数组
var oApi = document.getElementsByName('api');
var oApi[0].checked = true;
4.通过class属性名查找节点对象（注：复数的elements）注意是数组 Html5新增
var oApi = document.getElementsByClassName('api');
alert ( oApi[0].innerText );
5.通过通配符*查找所有标签的节点对象
var oAllElements= document.getElementsByTagName('*');
为什么要进行上面的操作，千辛万苦找到他就要操作他。操作他的标签、内容、样式；
(三)DOM节点对象的操作
（1）操作属性
对象.属性名 = 属性值
dom对象.setAttribute : 设置属性的值
对象.setAttribute(‘属性名’,’属性值’)
dom对象.getAttribute：获得属性值
对象.getAttribute(‘属性名’)
dom对象.removeAttribute：删除属性值
对象.removeAttribute(‘属性名’)
（2）操作内容(innerText & innerHTML)
innerText：只操作标签内的文字内容
innerHTML：可以操作标签内的子标签
（3）操作样式
如果css样式是多个单词的合成词（font-size、margin-top、background-color等），需要采用小驼峰法的形式（fontSize、marginTop）
对象.style.fontSize = “30px”;
(四)DOM节点对象的增删改
（1）新建节点对象：
document.createElement()
（2）确定节点位置：
父节点.appendChild()
父节点.insertBefore()
（3）删除节点：
父节点.removeChild(子节点)
（五） DOM节点类型
（1） 标签节点（元素节点）
（2） 属性节点（attributes属性）
（3） 文本节点
（六）DOM节点关系
（1）父子关系：childNodes(数组)、parentNode(一个)
（2）兄弟关系：nextSibling、previousSibling
