JavaScript操作DOM对象
0 核心
浏览器网页就是一个Dom树形结构！
- 获取Dom节点：得到Dom节点
- 更新：更新Dom节点
- 添加：添加一个新的节点
- 删除：删除一个Dom节点
要操作一个Dom节点，就必须要先获得这个Dom节点。
1 获取Dom节点
获得Dom节点代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children; //获取父节点下的所有字节点
// father.firstChild
// father.lastChild
</script>
</body>
</html>
以上为原生代码，之后尽量都使用jQuery();
2 更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本：
id1.innerText = '123456'修改文本的值id1.innerHTML = '<strong>123</strong>'可以解析HTML文本标签。
操作样式：
id1.style.color = 'red'; //属性使用字符串包裹
"red"
id1.style.fontSize = '20px'; //注意驼峰命名问题
"20px"
id1.style.padding = '2em';
"2em"
3 添加节点
在插入节点时，如果获取的Dom节点是空的，就可以通过innerHTML增加一个元素，但是如果Dom节点已经存在元素，就不可以这么做，因为会产生覆盖，原来元素会丢失。
故对于上述情况，使用追加：
代码测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
</script>
</body>
</html>
测试前：
3.1 将已有节点追加到指定位置：
测试代码：
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js)
测试后：
3.2 创建一个新的节点并追加：
测试代码：
var list = document.getElementById('list');
var newp = document.createElement('p'); //创建一个p标签
newp.id = 'newp';
newp.innerText = 'Hello Demut';
list.appendChild(newp); //追加
测试结果：
3.3 添加一个标签节点：
测试代码：
//创建一个标签节点, 通过这个属性可以修改任意的值。
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
list.appendChild(myScript);
成功添加：
3.4 添加一个style标签
测试代码：
var mystyle = document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(mystyle);
测试结果：
3.4 .insertBefore()
测试代码：
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.inserBefore(newNode,targetNode);
list.insertBefore(js,ee);
测试结果：
4 删除DOM节点
步骤： 1. 获取父节点。 2. 通过父节点删除自己。
代码测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>
测试前：
测试代码：（浏览器控制台中）
var self = document.getElementById('p1'); // 获取Dom节点
var father = self.parentElement; //获取p1的父节点
father.removeChild(self);
测试后：
注意： 此处演示一个错误的操作，同样对于上面的测试案例。
// 删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
说明：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
写在最后
行百里者半九十！
——《战国策·秦策五·谓秦王》
To Demut and Dottie!
