javascript基礎加固6—-DOM
本節 JavaScript 的 DOM 操作，內容主要包括：
-
通過 ID、名字、標簽名 選取元素；
-
通過 getAttribute 和 setAttribute 獲取和設置元素屬性；
-
通過 parentNode 獲取父元素、createElement 動態地創建節點、appendChild 和removeChild 動態地添加或者刪除節點。
基本概念
2.1.1 什麽是 DOM
DOM 是 文檔對象模型（Document Object Model）的簡稱，它的基本思想是把結構化文檔（比如 HTML 和 XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規範的對外接口，以達到使用編程語言操作文檔的目的，所以，DOM 可以理解成文檔（HTML 文檔、XML 文檔）的編程接口。
嚴格地說，DOM 不屬於 JavaScript，但是操作 DOM 是 JavaScript 最常見的任務，而 JavaScript 也是最常用於 DOM 操作的語言，本章介紹的就是 JavaScript 對 DOM 標準的實現和用法。
2.1.2 節點
DOM 的最小組成單位叫做 節點（node），一個文檔的樹形結構（DOM 樹），就是由各種不同類型的節點組成。
對於 HTML 文檔，節點主要有以下六種類型：
| 節點 | 名稱 | 含義 |
|---|---|---|
| Document | 文檔節點 | 整個文檔（window.document） |
| DocumentType | 文檔類型節點 | 文檔的類型 |
| Element | 元素節點 | HTML 元素（比如<head>、<body>等） |
| Attribute | 屬性節點 | HTML 元素的屬性（比如 class="right"） |
| Text | 文本節點 | HTML 文檔中出現的文本 |
| DocumentFragment | 文檔碎片節點 | 文檔的片段 |
2.2 選取文檔元素
2.2.1 通過 ID 選取元素
我們可以使用方法 getElementById() 通過元素的 ID 而選取元素，並對其做操作，比如：
<html> <body> <div id="my_div"></div> <script> document.getElementById("my_div").style.height="100px"; //設置 my_div 高度為 100px document.getElementById("my_div").style.background="red"; // 設置 my_div 顏色為 紅色 </script> </body> </html>
通過 getElementByID() 設置了 ID 為 my_div 的一個 div 標簽的高度（100px）和顏色（red）
2.2.2 通過名字（Name）或標簽名（TagName）選取元素
除了通過 ID 選擇元素，我們還可以使用 getElementsByName() 方法或者 getElementsByTagName() 方法找到元素，不過如果有多個同類型標簽，那我們需要以下標來確認：
<html> <body> <input type="text" /> <input type="text" /> <script> document.getElementsByTagName("input")[0].value="hello"; // 下標為 [0] 表示選取第 1 個 input 標簽 document.getElementsByTagName("input")[1].value="shiyanlou"; // 下標為 [1] 表示選取第 2 個 input 標簽 </script> </body> </html>
2.3 節點、屬性操作和文檔遍歷
2.3.1 查詢和設置元素的屬性
可以通過 getAttribute() 和 setAttribute() 查詢和設置元素的屬性：
<html> <head> <style> .class_1 { height:100px; width:100px; background:red; } .class_2 { height:100px; width:100px; background:blue; } </style> </head> <body> <div id="div_1" class="class_1"></div> <br/> <a>before:</a> <script> document.write(document.getElementById("div_1").getAttribute("class")); // 查詢 div_1 的屬性 </script> <br/> <a>after:</a> <script> document.getElementById("div_1").setAttribute("class","class_2"); // 修改 div_1 的屬性為 class_2 document.write(document.getElementById("div_1").getAttribute("class")); // 再次查詢 div_1 的屬性 </script> </body> </html>
代碼可見，一開始 div_1 的屬性為 class_1，我們通過getAttribute() 方法可以查看到該結果；
然後我們使用 setAttribute() 方法將 div_1 的屬性設置為 class_2 ，然後再次使用 getAttribute() 方法查詢，可見屬性已經變為 class_2 ，結果如圖：
2.3.2 父節點
通過 parentNode() 方法可以查看並操作一個節點的父節點，示例：找到 id 為 demo 的元素的父節點，並輸出其 class 的名稱：
<html> <body> <div class="demo-parent"> <div id="demo"> </div> </div> <script> document.write(document.getElementById("demo").parentNode.getAttribute("class")); </script> </body> </html>
2.3.3 創建和插入節點
在了解 JavaScript 之前，可能會以為一個 HTML 頁面被寫出來是什麽樣，那它就固定了是什麽樣子。
但是 JavaScript 可以動態地在頁面中創建並插入節點，這便需要用到 createElement()、appendChild() 方法，它們的作用分別是創建節點和插入節點。
比如：創建一個 div 並為其設置高度（100px）和背景色（red），並追加到 body 後面：
<html>
<body>
<div style="background:#00F; height:100px"></div>
<script>
var mydiv = document.createElement("div");
mydiv.style.height = "100px";
mydiv.style.background = "red";
document.getElementsByTagName("body")[0].appendChild(mydiv);
</script>
</body>
</html>
2.3.4 刪除節點
除了創建，我們還可以刪除一個節點，通過 removeChild() 方法：
<html>
<head>
</head>
<body>
<div>
<div id="div_red" style="background:#F00; height:100px"></div>
<div id="div_blue" style="background:#00F; height:100px"></div>
</div>
<script>
function remove_red(){
var obj = document.getElementById("div_red");
obj.parentNode.removeChild(obj);
}
</script>
<button onclick="remove_red()">remove red div</button>
</body>
</html>
點擊按鈕 “remove red div” 便可以刪去頁面上紅色的部分
javascript基礎加固6—-DOM