一，DOM 簡介
通過 HTML DOM，可訪問 javascript HTML 文檔的所有元素
HTML DOM（文檔對象模型）
當網(wǎng)頁被加載時，瀏覽器會創(chuàng)造頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對象的樹。
通過可編程的對象模型，javascript 獲得了足夠的能力來創(chuàng)建動態(tài)的HTML。javascript 能夠改變頁面中的所有 HTML 元素，所有 HTML 屬性和所有 CSS樣式。能夠?qū)撁嬷械乃惺录龀龇磻?yīng)。
通過 javascript，操作 HTML 元素。首先要找到該元素
通過 id 查找 HTML 元素
var x = document.getElementById.("mata");
如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。如果未找到該元素，則 x 將包含 null。
通過標簽名查找 HTML 元素
var x = document.getElementById.("mata");
var y = x.getElementsByTagName("p");
document.write("第四段是：" + y[3]);
通過查找 id = "mata" 的元素，然后查找 "mata" 中的所有<p>元素
DOM - 改變 HTML
HTML DOM 允許 javascript 改變 HTML 元素的內(nèi)容。
改變 HTML 輸出流
在 javascript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。
<script>
? document.write(Date());
</script>
不要使用在文檔加載之后使用 document.write()。這會覆蓋該文檔。
改變 HTML 內(nèi)容
修改 HTML 內(nèi)容的最簡單的方法是使用 innerHTML 屬性。語法：
document.getElementById(id).innerHTML = new HTML
例：
<p id = "p">hell world!</p>
<script>
document.getElementById("p").innerHTML = "good bye!";
</script>
或：
<script>
var x = document.getElementById("p");
x.innerHTML = "good bye!";
<script>
改變 HTML 屬性
改變 HTML 元素屬性，語法：
document.getElementById(id).attribute=new value?
例：
<img id = "image" src = "../img/dpn.gif">
<script>
document.getElementById("image").src = "../img/dpff.gif";
</script>
效果：
原圖為熄燈（dpn.gif）,但是已被修改為開燈(dpff.gif)。
改變 CSS
HTML DOM 允許 javascript 改變 HTML 元素的樣式
改變 HTML 樣式
語法： ?document.getElementById(id).style.property = new style
例：
<h1 id = "h1">DOM CSS</h1>
<button type="button" onclick = "document.getElementById("h1").style.color='#ff727a'">
請點擊</button>
點擊后的效果：
DOM 事件
HTML DOM 使 javascript 有能力對 HTML 事件做出反應(yīng)
對事件做出反應(yīng)
可以在事件發(fā)生時執(zhí)行 javascript，比如當用戶在 HTML 元素上點擊時。如需在用戶點擊某個元素時執(zhí)行代碼，請向一個 HTML 事件屬性添加 javascript 代碼：
onclick = javascript
HTML 事件的例子：?
1，當用戶點擊鼠標時 ? ? ? ?2，當網(wǎng)頁已加載時 ? ? ? 3，當圖像已加載時 ? ? ? 4，當鼠標移動到元素上時 ? ? ? 5，當輸入字段被改變時 ? ? ?6，當提交 HTML 表單時 ? ?7，當用戶觸發(fā)按鍵時
例： ? ?點擊時改變內(nèi)容
<h1 onclick = "this.innerHTML = '謝謝！'">點擊該文本</h1>
或： 從事件處理器調(diào)用一個函數(shù)：
<h1 onclick = "text(this)">點擊該文本</h1>
<script>
? function text(h1) {
? ? h1.innerHTML = "謝謝！";
? }
</script>
HTML 事件屬性
如需向 HTML 元素分配事件，可以使用時間屬性。
例：向 button 元素分配 onclick 事件：
<button onclick = "date()">請點擊</button>
<script>
? fonction date() {
? ? document.getElementById("h1").innerHTML = Date();
? }
</script>
使用 HTML DOM 來分配事件
HTML DOM 允許通過使用 javascript 來向
<button id = "my">請點擊</button>
<script>
? document.getElementById("my").onclick = function(){date()};
? function date() {
? ? document.getElementById("h1").innerHTML = Date();
? }
</script>
onload 和 onunload 事件
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發(fā)。 onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載頁面的正確版本。 onload 和 onunload 事件可用于處理 cookie。
<body onload = "boy()">
? <script>
? ? function boy() {
? ? ? if (navigator.cookieEnabled == true) {
? ? ? ? alert("已啟用 cookie");
? ? ? }
? ? ? else {
? ? ? ? alert("未啟用 cookie");
? ? ? }
? ? }
? </script>
</body>
onchange 事件
onchange 事件常結(jié)合對輸入字段的驗證來使用。
<input type = "text" id = "fname" onchange = "myf()">
<script>
? function myf() {
? ? var x=document.getElementById("fname");
? ? x.value = x.value.toUpperCase();
? }
</script>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移除元素時觸發(fā)函數(shù)。
<div onmouseover = "mOver(this)" onmouseout = "mOut(this) style = ""background-color: green; width: 200px; padding: 40px; color: #FFF">把鼠標移到上面</div>
<script>
? function mOver(obj) {
? ? obj.innerHTML = "謝謝！";
? }
? function mOut(obj) {
? ? obj.innerHTML = "把鼠標移到上面";
? }
</script>
onmousedown，onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發(fā) onmousedown 事件，當釋放鼠標按鈕時，會觸發(fā)onmouseup 事件，最后當完成鼠標點擊時，會觸發(fā)onclick ?事件。
<div onmousedown = "mDown(this)" onmouseup = "mUp(this)" style = "background-color: green; color: #FFF; width: 200px; padding: 40px"></div>
<script>
? function mDown(obj) {
? ? obj.style.backgroundColor = "124dEA";
? ? obj.innerHTML = "請釋放鼠標按鈕";
? }
? function mUp(obj) {
? ? obj.style.backgroundColor = "green";
? ? obj.innerHTML = "請按下鼠標按鈕";
? }?
</script>
onfocus 事件
<input type = "text" onfocus = "myf(this)">
<script>
? function myf(x) {
? ? x.style.background = "red";
? }
</script>
DOM 元素（節(jié)點）
添加和刪除節(jié)點（HTML元素）
創(chuàng)建新的 HTML元素
如需向 HTML DOM 添加新元素，必須首先創(chuàng)建該元素（元素節(jié)點），然后向一個已存在的元素追加該元素。
<div id = "dl">
? <p>一個段落。</p>
? <p>又一個段落。</p>
</div>
<script>
? var para = document.createElement("p"); ?//創(chuàng)建新的<p>元素
? var node = document.createTextNode("一個新段落。"); ? //創(chuàng)建文本節(jié)點
? para.appendChild(node); ? ? //向<p>元素 追加這個文本節(jié)點
? var ele = document.getElementById("dl"); ? ?// 找到已有元素
? ele.appendChild(para); ? ?//追加新元素
</script>
刪除已有的 HTML 元素
如需刪除 HTML元素，必須首先獲得該元素的父元素：
<div id = "dl">
? <p id = "p1">一個段落</p>
? <p id = "p2">有一個段落</p>
</div>
<script>
? var parent = document.getElementById("dl"); ?//找到 id = "dl" 的元素
? var chi = document.getElementById("p1"); ? ?//找到 id = "p1" 的元素
? parent.removeChild(chi); ? //從父元素中刪除子元素
</script>
找到希望刪除的子元素，然后使用其 parentNode 屬性來找到父元素：
var child = document.getElementById("p1"); ?//找到 id = "p1" 的元素
child.parentNode.removeChid(child); ?//使用其 parentNode 屬性來找到父元素
