今天继续学习DOM的 操作，昨天休息了一天，感觉很愧疚。
前天学习了对DOM的修改以及DOM事件，今天看了不同的文档，感觉有很多遗漏之处，今天深入学习一下。
首先回顾一下DOM的访问方法：
getElementById ：通过id获取元素节点
appendChild： 添加节点
removeChild：删除节点
/×——————————————×/
innerHTML ：获取节点元素的文本值
parentNode ：获取节点的父节点（root无父节点）
childNodes：获取当前节点的子节点
attributes ：获取当前节点的属性节点
上面的一些方法其实很好理解，就类似于数据结构中的树，其中父节点，子节点，胞节点的概念我就不细说了，属性节点是元素节点的属性
上一章学习了如何获取节点，以及修改节点的文本节点和属性节点。下面就把如何添加和删除节点补上。
添加节点
1：将已存在的节点插入当其他节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入DOM</title>
</head>
<body>
<p id="p1">在p1下面添加节点</p>
<div id="div">
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<br/>
<script>
var x=document.getElementById('p1');
var list=document.getElementById('div');
list.appendChild(x);
</script>
</body>
</html>效果：
2：创建新节点并添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入DOM</title>
</head>
<body>
<p id="p1">在p1下面添加节点</p>
<div id="div">
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<br/>
<script>
var x=document.createElement('p4');
x.innerHTML='p4';
list=document.getElementById('div');
list.appendChild(x);
</script>
</body>
</html>结果：
获取父节点：
<script>
var list=document.getElementById('div');
x=list.parentNode;
alert(x);
</script>获取子节点：
<script>
var list=document.getElementById('div');
x=list.childNodes;
alert(x[0].nodeValue);
</script>当然还有一些其他的方法，比如firstChild ，lastChild， hasChildNodes()
删除DOM removeChild：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入DOM</title>
</head>
<body>
<p id="p1">在p1下面添加节点</p>
<div id="div">
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<br/>
<script>
var list=document.getElementById('div');
var p2=document.getElementById('p2');
list.removeChild(p2);
</script>
</body>
</html>替换节点 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入DOM</title>
</head>
<body>
<p id="p1">在p1下面添加节点</p>
<div id="div">
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<br/>
<script>
function r() {
var pNode = document.createElement('p');
var tNode = document.createTextNode('故人西辞黄鹤楼');
pNode.appendChild(tNode);
//获取要替换的节点
var reNode = document.getElementsByTagName('p')[0];
//这种方法只适用于IE浏览器
//reNode.replaceNode(pNode, reNode);
//适用于各种浏览器
reNode.parentNode.replaceChild(pNode, reNode);
}
</script>
<input id="Button2" type="button" value="替换节点" onclick="r()" />
</body>
</html>