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!