5-2 DOM介紹 · 前端筆記

### DOM的介紹 HTML DOM模型被構造為對象的樹 ![](https://box.kancloud.cn/c4c51af5ef6e073232441ead1969ad87_702x423.png) #### JavaScript可以通過DOM做什么通過可編程的對象模型，JavaScript獲得了足夠的能力來創造動態的HTML 1.能夠改變頁面中所有HTML元素 2.能夠改變頁面中的所有HTML屬性 3.能夠改變頁面中的所有CSS樣式 4.能夠對頁面中的所有事件作出反應 ### DOM事件 #### 1.onload事件 onload事件--當頁面加載完畢之后執行（避免頁面從上到下加載導致的問題） window.onload=function() {里面寫頁面加載完畢后的方法} #### 2.onclick事件 onclick事件--當點擊的時候執行 document.getElementById("xx").onclick=function(){ ? this.屬性 = "xxx" ? } #### 3.焦點事件onfocus/onblur onfocus 獲取焦點；onblur 失去焦點 #### 4.鼠標事件onmouseover/onmouseout ~~~ ?img.onmouseover = function(){ ? ? ? ? ? ? ? img.src = "images/03.png" ? ? ? ? ? } ?img.onmouseout = function(){ ? ? ? ? ? ? ? img.src = "images/01.png" ? ? ? ? ? } ~~~ ### DOM節點 1.添加節點 ~~~ //html部分 <body> ? ? ? ?<input type="button" value="創建節點" id="btn"> ? ? ? ?<div id="info"> ? ? ? ? ? ? ? ? ? ?</div> ? </body> ~~~ ~~~ ?window.onload = function(){ ? ? ? ? ?var btn = document.getElementById("btn"); ? ? ? ? ?btn.onclick = function(){ ? ? ? ? ? ? ?//1.創建一個節點 ? ? ? ? ? ? ?var p = ?document.createElement("p"); ? ? ? ? ? ? ?//2.把節點放進層里面,通過ipt的父節點info來完成添加操作 ? ? ? ? ? ? ?var info = document.getElementById("info"); ? ? ? ? ? ? ?info.appendChild(p) ? ? ? ? ? } ? ? ? } ~~~ **關鍵方法**：document.createElement("什么類型的標簽") ? 父類元素.appendChild() 2.刪除節點 ~~~ var del = document.getElementById("del"); ? ? ? ? ?del.onclick = function(){ ? ? ? ? ? ? ?//1.先獲取到要刪除的節點 ? ? ? ? ? ? ?var ps = document.getElementsByTagName("p"); ? ? ? ? ? ? ?//2.獲取到要刪除節點的父元素 ? ? ? ? ? ? ?var info = document.getElementById("info"); ? ? ? ? ? ? ?if(ps[0]) ? ? ? ? ? ? ?info.removeChild(ps[0]); ? ? ? ? } ~~~ **關鍵方法**：父類元素.removeChild();