1.DOM
DOM(Document Object Model)即文档对象模型，针对HTML和XML文档的API(应用程序接口)，DOM描绘的是一个层次化的节点树，允许开发人员进行增加、删除、修改页面的某一部分。
2.节点
加载HTML页面时，Web生成一个树形结构，用来表示页面内部结构
节点之间的关系：父子关系 父节点 子节点 eg：<html>和<head>他们为父子关系
兄弟关系 兄弟节点 eg:<head>和<body> 是兄弟
(只有这两种关系，和数据结构中的有点不一样，但是也有相似之处)
3.节点种类(共有12种，但是常用的有三种 A.元素节点 B.属性节点(在dom3中已没有) C.文本节点)
4.层次节点属性(下面教大家怎么用这些常用的属性)
①childNodes
<body>
<div id='box'>
<div>你好！</div>
<div>Hello</div>
<div>Hi</div>
</div>
<script type='text/javascript'>
var element=document.getElementById('box').childNodes;//通过id=box获取节点对象，然后再用上面表格中的属性childNodes获取所有的子节点。注意：是直接后代，跨后代不行
console.log(element);
</script>
</body>结果见下图：
注意：空格也是id为box节点对象的孩子，所以那些text代表的就是空格
②firstChild
<body>
<div id="box">
<div>你好！</div>
<div>Hello</div>
<div>Hi</div>
</div>
<script type="text/javascript">
var element=document.getElementById('box').firstChild;
console.log(element);
</script>
</body>见下图：
分析：因为id为box节点对象的第一个孩子为空格，所以输出为text；
③.lastChild(这个和first是一样的，这里就不在赘述)
④.parentNode
<body>
<div id="box">
<div>你好！</div>
<div>Hello</div>
<div>Hi</div>
</div>
<script type="text/javascript">
var element=document.getElementById('box').parentNode;
console.log(element);
</script>
</body>结果见下图：
分析：因为id为box的节点对象的父亲是<body>，所以在用parentNode这个属性时，输出的应该是节点对象的父亲
⑤.previousSibling
<body>
<div>你好！</div><div id="box">Hello</div><div>Hi</div>
<script type="text/javascript">
var element=document.getElementById('box').previousSibling;
console.log(element);
</script>
</body>见下图：
⑥.nextSibling
<body>
<div>你好！</div><div id="box">Hello</div><div>Hi</div>
<script type="text/javascript">
var element=document.getElementById('box').nextSibling;
console.log(element);
</script>
</body>见下图：
5.节点操作（怎么用下面的方法）
①createElement()和appendChild
<body>
<script type="text/javascript">
var element=document.createElement('p');
element.innerHTML='Hello world!';
document.body.appendChild(element);
</script>见下图：
②createTextNode()和AppendChildd();
<body>
<script type="text/javascript">
var element=document.createTextNode('Hello world');
document.body.appendChild(element);
</script见下图：
③insertBefore
<body>
<div id='box'></div>
<script type="text/javascript">
var element=document.createElement('p');//创建新的节点
element.innerHTML='你好！';
var o=document.getElementById('box');//获取旧的节点
document.body.insertBefore(element,o);//将以前节点对象的前边添加一个新的节点对象
</script>
</body>见下图：
④repalceChild()和cloneNode()
<body>
<img src="images/29.jpg" alt="" style='width:100px;height:100px;'>
<img src="images/56.jpg" alt="" style='width:100px;height:100px;'>
<script type="text/javascript">
var a=document.images[1].cloneNode();//复制第二张图片
document.body.replaceChild(a,document.images[0]);//用复制的图片去替换第一张图片，这样第二张图片就不会消失
</script>
</body>见下图：
