DOM入門
一 DOM的介紹
DOM=DocumentObject Model 文檔對象模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構，換句話說：這是表示和處理一個HTML或XML文檔常用的方法。有一點很重要的是DOM的設計是以對象管理組織的規約爲基礎，因此可以用於任何編程語言
D ： 文檔 -- html文檔或xml文檔
O ： 對象 – document對象的屬性和方法
M ： 模型
DOM是針對HTML和XML文檔 基於樹的API（應用程序編程接口）
DOM樹：節點（node）層次
DOM把一個文檔表示爲一棵家譜樹（父、子、兄弟）
DOM定義了node的接口以及許多節點類型來表示XML節點的多個方面
二 節點的介紹
1．節點的介紹
根據DOM，HTML文檔中的每一個成分都是一個節點，DOM的規定爲：
（1）整個文檔是一個文檔節點
（2）每個HTML標籤是一個元素節點
（3）包含在HTML元素中的文本是文本節點
（4）每一個HTML屬性是一個屬性節點
（5）註釋屬性註釋節點
2． Node層次
節點彼此都有等級關係
（1）html文檔中的所有節點組成一個文檔樹
（2）html文檔中的每一個元素、屬性、文本等都代表着樹中的一個節點，樹起始於文檔節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文本節點爲止
（3）每一個html標籤都是一個元素節點
（4）標籤中的文字則是文本節點
（5）標籤中的屬性是屬性節點
3．Node類型
DOM1級定義了一個Node接口，該接口將由DOM中的所有節點實現。這個接口在js中是作爲Node類型實現，除了IE之外，在其他所有瀏覽器中都可以訪問這個類型，js中的所有節點類型都繼承自Node類型，因此所有的節點類型都共享着相同的基本屬性和方法，每一節點都是一個NodeType屬性，用於表名節點的類：
主要學習的幾個類型爲：
Node.ELEMENT.NODE(1)
Node.ATTRIBUTE.NODE(2)
Node.TEXT.NODE(3)
4 . NODE接口的 特性和方法
nodeName 節點的名字：根據節點的類型
nodeValue 節點的值：根據節點的類型而定義
nodeType 節點的類型常量值之一
。。。。
三 舉例
1．document的documentElement舉例
window.onload = function(){
//document類型，返回的是文檔的根節點
var root = document.documentElement;
alert("節點的名稱"+root.nodeName+"\n節點的值"+root.nodeValue+"\n節點的類型"+root.nodeType);
//節點的名稱HTML 節點的值null節點的類型1
}
注：在引入js文件的時候，如果在html頁面中引入js文件，在訪問的時候可以使用本地的地址訪問：file://D:/extjs/ajaxWeb/WebRoot/dom/domNode.html
也可以使用：http://localhost:8080/ajaxWeb/dom/domNode.html訪問，但是如果js文件在html外面寫，在訪問的時候只能用loclahost訪問，並且要修改html頁面的編碼方式爲GBK，在html引入js的時候注意引入的方式爲：
<script type="text/javascript" src="/ajaxWeb/dom/dom.js"></script>
是絕對的，不可以只寫/dom/dom.js，這樣訪問不到。
2．文檔節點 document的舉例
//文檔節點對象getElementById(id的名稱)根據指定的id名稱獲取節點對象，也稱爲dom對象
varinputDom = document.getElementById("uname");
//當前dom對象的屬性值
alert(inputDom.type + " " +inputDom.value + " "+ inputDom.id);
//節點屬性<input type="text" value="請輸入用戶名" id="uname"/>
//元素節點名稱就是標籤名稱 value值爲null 元素節點的值爲1
alert("當前節點的名稱：" + inputDom.nodeName + " 當前節點的value值" +inputDom.nodeValue + "節點的類型" + inputDom.nodeType);
//首先判斷該節點是否是元素節點
if(inputDom.nodeType == 1) {
//attributes來獲取該元素節點的屬性
varattrs = inputDom.attributes;//僅用於元素節點
alert(attrs.length);//在ie中爲136，在firxfox中爲3
//遍歷屬性節點
for(vari = 0; i < attrs.length; i++) {
//得到一個具體的屬性節點
varattr = attrs.item(i);//獲取具體的屬性
//輸出屬性節點的名稱和節點類型值
alert("屬性節點的名稱：" + attr.nodeName + "屬性節點的value值" +attr.nodeValue + "屬性階段的類型值" + attr.nodeType);
}
}
//判斷當前節點是否是子節點
if(inputDom.hasChildNodes()) {
varson = inputDom.childNodes;//可以遍歷
alert("節點的大小是：" + son.length);//結果爲1
}