DOM概述
JavaScript的三个组成部分：核心（ECMAScript欧洲计算机制造商协会，描述了JS的语法和基本对象），文档对象模型（DOM，把整个HTML当成一个对象，处理网页内容的方法和接口），浏览器对象模型（BOM，把浏览器当成一个对象，与浏览器交互的方法和接口）
什么是DOM和节点
DOM（文档对象模型）
DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。其实就是为了能让js操作html元素而制定的一个规范。
DOM树状的树形结构
节点
由上面的结构图可以看出，整个文档就是一个文档节点，每个HTML标签都是一个元素节点，标签中的文字则是文本节点，标签的属性是属性节点，一切都是节点...
获取节点
直接获取
有三种方法：
通过id： document.getElementById('box')
返回值是一个元素节点，可以直接使用（例如获得属性值，设置属性等）。如果查找不到对应id名的节点，返回值为null而不是undefined。
通过标签名： document.getElementsByTagName('div')
通过类名： document.getElementsByClassName('box') （在IE5，6，7，8中不兼容）
通过标签名和类名获得的返回值是一个伪数组，习惯性是惯例之后再使用。查找不到对应的节点，返回值为空数组。获取其中第一个元素，是 document.getElementsByTagName('div')[0]
通过访问关系获取
节点的访问关系，是以属性的方式存在的。
节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。
| 父节点 | 兄弟节点 | 子节点 | 所有子节点 |
| parentNode | nextSibling | firstChild | childNodes |
| nextElementSibling | firstElementChild | children | |
| previousSibling | lastChild | ||
| previousElementSibling | lastElementChild |
（1）父节点
parentNode
（2）兄弟节点
nextSibling：调用者是节点。IE678中指下一个元素节点（标签），火狐谷歌IE9+以后都指下一个节点（包括空文档和换行节点）。所以在IE678中用nextSlibling，在火狐谷歌IE9+中用nextElementSibling。
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previousSibling：指上一个兄弟节点。同nextSibling兼容相同
上一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
（3）单个子节点
firstChild：调用者是父节点。IE678指第一个子元素节点（标签），火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。firstElementChild在火狐谷歌IE9+指第一个元素节点。
第一个子节点 = 节点.firstElementChild || 节点.firstChild
lastChild：最后一个子节点。与firstChild兼容性相同。
最后一个子节点 = 节点.lastElementChild || 节点.lastChild
（3）所有子节点
childNodes：返回指定元素的子节点集合，包含所有节点。
children：返回指定元素的子节点集合，只包含元素节点。它是非标准属性，在IE678中，包含注释节点。
节点操作
创建节点
document.createElement()
插入节点
父节点.appendChild()
<div id="box"></div>
<script>
//创建节点li
var liNode = document.createElement('li');
//获取父元素
var box = document.getElementById('box');
//添加
box.appendChild(liNode);
</script>
父节点.insertBefore()
<div id="box">
<span></span>
<span id="span"></span>
<span></span>
</div>
<script>
//创建节点li
var liNode = document.createElement('li');
//获取父元素
var box = document.getElementById('box');
var span = document.getElementById('span');
//将新创建的节点添加到#span前
box.insertBefore(liNode, span);
</script>
删除节点
父节点.removeChild()
<div id="box">
<span></span>
<span id="span"></span>
<span></span>
</div>
<script>//获取父元素
var box = document.getElementById('box');
var span = document.getElementById('span');
//删除#span节点
box.removeChild(span);
</script>
或者可以只查找自己本身来删除本身
<script>
//获取自身元素
var span = document.getElementById('span');
//删除#span节点
span.parentNode.removeChild(span);
</script>
复制节点
oldNode.cloneNode(true)。
接受一个布尔值参数，true表示深复制（复制节点及其所有子节点），false表示浅复制（复制节点本身，不复制子节点）。谁调用复制谁。
属性操作
通过元素.属性名或者元素[属性名]
<img src="./1.png" alt="图片" title="图片1" id="img1" class="image">
<script>
var img = document.getElementById('img1');
console.log(img.src);
console.log(img['src']);
console.log(img.className);
console.log(img['className']);
</script>
通过getAttribute,setAttribute和removeAttribute操作
<img src="./1.png" alt="图片" title="图片1" id="img1" class="image">
<script>
var img = document.getElementById('img1');
//获取
console.log(img.getAttribute('id'));
//设置
img.setAttribute('id', 'img2');
//删除
img.removeAttribute('alt');
</script>
这两个方法的区别是，前者操作的是DOM对象本身，后者操作的是标签本身。例如通过点方法添加一个'aaa'属性，就不能在html中展示出来，但是能获取到。通过setAttribute方法添加，就会在html结构中展示出来并能获取到。
