2.1 基本概念
DOM：DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範,DOM是一種與瀏覽器，平臺，語言無關的接口，使得你可以訪問頁面其他的標準組件。
D：文檔 – html 文檔 或 xml 文檔
O：對象 – document 對象的屬性和方法
M：模型
DOM 是針對xml(html)的基於樹的API。
DOM樹:節點（node）的層次。
DOM 把一個文檔表示爲一棵家譜樹（父，子，兄弟）。
DOM定義了Node的接口以及許多種節點類型來表示XML節點的多個方面。
2.2 DOM的結構
DOM的結構與家譜的結構及其類似。
DOM的結構
<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<h1>DOM的結構</h1>
<p><a href=”href”>鏈接</a></p>
</body>
</html>
它的DOM結構如下：
2.3 節點及其類型
節點
（1）由結構圖中我們可以看到，整個文檔就是一個文檔節點。
（2）而每一個HMTL標籤都是一個元素節點。
（3）標籤中的文字則是文本節點。
（4）標籤的屬性是屬性節點。
（5）一切都是節點……
節點樹
節點樹的概念從圖中一目瞭然，最上面的就是“樹根”了。節點之間有父子關係，祖先與子孫關係，兄妹關係。這些關係從圖中也很好看出來，直接連線的就是父子關係了。而有一個父親的就是兄妹關係……
NODE接口的特性和方法
| 特性/方法 | 類型/返回類型 | 說明 |
|---|---|---|
| nodeName | String | 節點的名字；根據節點的類型而定義 |
| nodeValue | String | 節點的值；根據節點的類型而定義 |
| nodeType | Number | 節點的類型常量值之一 |
| ownerDocument | Document | 指向這個節點所屬的文檔 |
| firstChild | Node | 指向在childNodes列表中的第一個節點 |
| lastChild | Node | 指向在childNodes列表中的最後一個節點 |
| childNodes | NodeList | 所有子節點的列表 |
| previousSibling | Node | 指向前一個兄弟節點；如果這個節點就是第一個兄弟節點，那麼該值爲null |
| nextSibling | Node | 指向後一個兄弟節點；如果這個節點就是最後一個兄弟節點，那麼該值爲null |
| hasChildNodes() | Boolean | 當childNodes包含一個或多個節點時，返回真 |
| attributes | NamedNodeMap | 包含了代表一個元素的特性的Attr對象；僅用於Element節點 |
| appendChild(node) | Node | 將node添加到childNodes的末尾 |
| removeChild(node) | Node | 從childNodes中刪除node |
| replaceChild(newnode, oldnode) | Node | 將childNodes中的oldnode替換成newnode |
| insertBefore(newnode, refnode) | Node | 在childNodes中的refnode之前插入newnode |
查找元素節點
（1）getElementById()
尋找一個有着給定 id 屬性值的元素，返回值是一個有着給定 id 屬性值的元素節點。如果不存在這樣的元素，它返回 null.
var oElement = document.getElementById ( sID )
該方法只能用於 document 對象
<input type=”text” value=”康康" id="tid">
function test(){
var usernameElement=document.getElementById(“tid");
//獲取元素的值
alert("usernameElement.value: "+usernameElement.value)
//獲取元素的類型
alert("usernameElement.type: "+usernameElement.type)
}
（2）getElementsByName()
尋找有着給定name屬性的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等於當前文檔裏有着給定name屬性的所有元素的總個數。
<form name="form1">
<input type="text" name="tname" value="國慶60年_1" /><br>
<input type="text" name="tname" value="國慶60年_2" /><br>
<input type="text" name="tname" value="國慶60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok" οnclick="test();">
</form>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
<input type="text" name="username" value="國慶60年_1" /><br>
<input type="text" name="username" value="國慶60年_2" /><br>
<input type="text" name="username" value="國慶60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok"><br>
<script language="JavaScript">
//該方法返回是數組類型
var usernameElements=document.getElementsByName("username");
for (var i = 0; i < usernameElements.length; i++) {
//獲取元素的類型
//alert(usernameElements[i].type)
//獲取元素value的值
//alert(usernameElements[i].value);
//採用函數直接量的方法
usernameElements[i].onchange = function(){
alert(this.value);
}
}
</script>
（3）getElementsByTagName()
尋找有着給定標籤名的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等於當前文檔裏有着給定標籤名的所有元素的總個數。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節點當中尋找有着給定標籤名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements.length);
// //處理input
// var inputElements=document.getElementsByTagName("input");
// //輸出input標籤的長度
// //alert(inputElements.length);
// for(var i=0;i<inputElements.length;i++){
// if(inputElements[i].type!='button'){//submit
// alert(inputElements[i].value);
// }
// }
//處理select
// //獲取select標籤
// var selectElements=document.getElementsByTagName("select");
// //獲取select下的子標籤
// for(var j=0;j<selectElements.length;j++){
// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0;i<optionElements.length;i++){
// alert(optionElements[i].value);
// }
// }
var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
if (inputElements.type != 'submit') {
inputElements[i].onchange = function(){
alert(this.value)
};
}
var selectElements=document.getElementsByTagName("select");
for (var i = 0; i < selectElements.length; i++) {
selectElements[i].οnchange=function(){
alert(this.value);
}
}
var textareaElements=document.getElementsByTagName("textarea");
for (var i = 0; i < textareaElements.length; i++) {
textareaElements[i].onchange = function(){
alert(this.value);
};
}
查看是否存在子節點
hasChildNodes()
（1）該方法用來檢查一個元素是否有子節點，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
（2）文本節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false;
（3）如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數組和空字符串。
var selectElements=document.getElementsByTagName("select");
alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
alert(inputElements[i].hasChildNodes());
}