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