1.什么是DOM
DOM 是 Document Object Model(文檔對象模型)的縮寫。
DOM是中立于平臺和語言的接口,它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
在 HTML DOM中,所有事物都是節點。DOM 是被視為節點樹的 HTML。
2.什么是DOM節點
HTML 文檔中的所有內容都是節點
整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點
3.常見的DOM屬性
屬性是節點(HTML 元素)的值,您能夠獲取或設置。
innerHTML 屬性
nodeName 屬性
nodeName 屬性規定節點的名稱
元素節點的 nodeName 與標簽名相同
屬性節點的 nodeName 與屬性名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
nodeValue 屬性
nodeValue 屬性規定節點的值。
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本本身
屬性節點的 nodeValue 是屬性值
4.訪問元素的方法
通過使用 getElementById() 方法
通過使用 getElementsByTagName() 方法
通過使用 getElementsByClassName() 方法
5.修改元素的方法
改變 HTML 內容
document.getElementById("p1").innerHTML="New text!";
改變 CSS 樣式
document.getElementById("p2").style.color="blue";
追加子元素的方法
首先必須創建該元素(元素節點),然后把它追加到已有的元素上。var para=document.createElement("p");
創建新的 HTML 元素 - appendChild() 在父元素的最后追加
創建新的 HTML 元素-element.insertBefore(para,child);在指定位置給父級追加子元素
刪除 HTML 元素,您必須清楚該元素的父元素:parent.removeChild(child);
替換 HTML 元素:parent.replaceChild(para,child); 方法
varelement=document.getElementById("d1");
varpara=document.createElement("p");
varnode=document.createTextNode("This is new.");
para.appendChild(node);
element.appendChild(para);
6.DOM - 事件
允許 JavaScript 對 HTML 事件作出反應
onclick 事件——當用戶點擊時
onload 事件——用戶進入
onunload 事件——用戶離開
onmouseover事件——鼠標移入
onmouseout事件——鼠標移出
onmousedown事件——鼠標按下
onmouseup 事件——鼠標抬起