對於B/S開發，客戶端與服務器端的交互是非常必要的，JavaScript的提出解決了很多問題，AJAX的提出也解決了異步通信的問題，更加爲用戶着想了。而DOM是其中非常基礎的知識，在學習AJAX的同時，我學習了一下DOM的相關操作，這篇重點講一下HTML DOM的相關內容，其實就是在HTML網頁上進行的各種操作。
一，概述： DOM（對象文檔模型（Document Object Model）），是W3C組織推薦的處理可擴展置標語言的標準編程接口。DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。也就是說，這是表示和處理一個HTML或XML文檔的常用方法。DOM技術是用戶頁面可以動態的變化，從而大大使頁面的交互性增強。但是DOM必須通過JavaScript等腳本語言來進行讀取，改變HTML、XHTML以及XML等文檔。
簡單說就是DOM規定了HTML，XML等的一些規範，使JavaScript可以根基這些規範來進行各種操作。而這些規範我們可以用樹來形象的表示：
通過這樣的樹，我們就可以很快找到我們想要操作的節點，進而進行各種屬性，方法，事件等的操作。
二，通過JavaScript對HTML網頁內容進行操作：
1，首先需要我們查找要操作的節點：
a,通過id查找：
Eg: varx=document.getElementById("name")
b，通過標籤名：
Eg:查找ID爲name標籤下的所有p標籤
varx=document.getElementById("name");
vary=x.getElementsByTagName("p");
c，通過類名：
Eg:varx=document.getElementsByClassName("name");
注意：這種情況在IE5，6，7，8中無效。（網上這麼說，等待實驗）
2，修改插好出來的節點的屬性，內容，樣式等：
首先看一下常用的HTML DOM屬性:
a,改變HTML的屬性（注意HTML的屬性和HTML DOM屬性的區分）：
Eg:改變<img>元素的src屬性：
<script>
document.getElementById("p_w_picpath").src="/i/shanghai_lupu_bridge.jpg";
</script>
b,改變HTML的內容：
Eg:
<script>
document.getElementById("p1").innerHTML="Newtext!";
</script>
c,改變HTML的樣式：
<script>
document.getElementById("p2").style.color="blue";
</script>
總之對於HTML各種的修改需要對HTML的各種屬性非常熟悉，通過JavaScript來進行各種修改！
三，下邊看一下關於節點本身的處理：
首先了解一下節點的相關知識：
父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。看這個圖：
1，添加新的節點：
[javascript] view plain copy print?
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");//創建一個標籤p節點名爲para
var node=document.createTextNode("這是新段落。");//定義節點元素的內容
para.appendChild(node);//將元素和內容聯繫起來
var element=document.getElementById("div1");//找到節點爲div1的節點
element.appendChild(para);//向節點div1中添加新節點para
</script>
</body>
</html>
</span>
2,刪除某個節點元素：
[javascript] view plain copy print?
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//刪除父節點中的子節點child
</script>
</body>
</html>
</span>
上邊主要是進行各種方法的處理，涉及到的方法，在這裏總結一下：
四，下邊我寫一下HTML DOM中的一些事件：
首先看一下常見的事件，其實和我們C/S開發的大同小異：
下邊我撿兩個舉一下例子說一下事件的用法：
1，獲得焦點時改變顏色，這個是經常用的：
[javascript] view plain copy print?
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>
請輸入英文字符：<input type="text" onfocus="myFunction(this)">
<p>當輸入字段獲得焦點時，會觸發改變背景顏色的函數。</p>
</body>
</html>
</span>
2，鼠標移動上元素和移開元素：
[javascript] view plain copy print?
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="謝謝你"
}
function mOut(obj)
{
obj.innerHTML="把鼠標指針移動到上面"
}
</script>
</body>
</html>
</span>
綜上爲HTML DOM通過JavaScript操作HTML頁面的基礎知識，其實和我們C/S,B/S後臺的都大同小異，只不過它是解
決網頁上的一些內容而已，有一些新的知識點，但是知識類型，例如屬性，方法，事件哈等都是一樣的！不過還是非常需要我們在實踐中來鍛鍊的！這篇博客爲HTML DOM篇，主要是針對HTML來操作。，下篇，重點學習一下XML DOM知識！
轉載至：http://blog.csdn.net/liujiahan629629/article/details/16991467