一、DOM

DOM： DOM= Document Object Model，文檔對象模型，DOM可以以一種獨(dú)立于平臺和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。換句話說，這是表示和處理一個(gè)HTML或XML文檔的常用方法。有一點(diǎn)很重要，DOM的設(shè)計(jì)是以對象管理組織（OMG）的規(guī)約為基礎(chǔ)的，因此可以用于任何編程語言.
D：文檔 – html 文檔 或 xml 文檔
O：對象 – document 對象的屬性和方法
M：模型
DOM 是針對xml(html)的基于樹的API。
DOM樹:節(jié)點(diǎn)（node）的層次。
DOM 把一個(gè)文檔表示為一棵家譜樹（父，子，兄弟）
DOM定義了Node的接口以及許多種節(jié)點(diǎn)類型來表示XML節(jié)點(diǎn)的多個(gè)方面

二、DOM的結(jié)構(gòu)

三、節(jié)點(diǎn)

根據(jù) DOM，HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。DOM 是這樣規(guī)定的：
整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
注釋屬于注釋節(jié)點(diǎn)

四、Node 層次

節(jié)點(diǎn)彼此都有等級關(guān)系。
HTML 文檔中的所有節(jié)點(diǎn)組成了一個(gè)文檔樹（或節(jié)點(diǎn)樹）。HTML 文檔中的每個(gè)元素、屬性、文本等都代表著樹中的一個(gè)節(jié)點(diǎn)。樹起始于文檔節(jié)點(diǎn)，并由此繼續(xù)伸出枝條，直到處于這棵樹最低級別的所有文本節(jié)點(diǎn)為止。

五、節(jié)點(diǎn)及其類型

節(jié)點(diǎn)
   *  由結(jié)構(gòu)圖中我們可以看到，整個(gè)文檔就是一個(gè)文檔節(jié)點(diǎn)。
   *  而每一個(gè)HMTL標(biāo)簽都是一個(gè)元素節(jié)點(diǎn)。
   *  標(biāo)簽中的文字則是文本節(jié)點(diǎn)。
   *  標(biāo)簽的屬性是屬性節(jié)點(diǎn)。
   *  一切都是節(jié)點(diǎn)……

節(jié)點(diǎn)樹
     節(jié)點(diǎn)樹的概念從圖中一目了然，最上面的就是“樹根”了。節(jié)點(diǎn)之間有父子關(guān)系，祖先與子孫關(guān)系，兄妹關(guān)系。這些關(guān)系從圖中也很好看出來，直接連線的就是父子關(guān)系了。而有一個(gè)父親的就是兄妹關(guān)系……

六、查找并訪問節(jié)點(diǎn)

你可通過若干種方法來查找您希望操作的元素：
通過使用 getElementById() 和 getElementsByTagName() 方法
通過使用一個(gè)元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild 屬性

七、查找元素節(jié)點(diǎn)

getElementById()
       尋找一個(gè)有著給定 id 屬性值的元素，返回值是一個(gè)有著給定 id 屬性值的元素節(jié)點(diǎn)。如果不存在這樣的元素，它返回 null.
var oElement = document.getElementById ( sID )
     該方法只能用于 document 對象

<input type="text" value="國慶60周年" id="tid">
 function test(){
    var usernameElement=document.getElementById(“tid");
    //獲取元素的值
    alert("usernameElement.value: "+usernameElement.value)
    //獲取元素的類型
    alert("usernameElement.type: "+usernameElement.type)
}

getElementsByName()
尋找有著給定name屬性的所有元素，這個(gè)方法將返回一個(gè)節(jié)點(diǎn)集合，這個(gè)集合可以當(dāng)作一個(gè)數(shù)組來處理。這個(gè)集合的 length 屬性等于當(dāng)前文檔里有著給定name屬性的所有元素的總個(gè)數(shù)。

 <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"  onclick="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"> //該方法返回是數(shù)組類型 var usernameElements=document.getElementsByName("username"); for (var i = 0; i < usernameElements.length; i++) { //獲取元素的類型 //alert(usernameElements[i].type) //獲取元素value的值 //alert(usernameElements[i].value); //采用函數(shù)直接量的方法 usernameElements[i].onchange = function(){ alert(this.value); }} </script>
 

getElementsByTagName()
尋找有著給定標(biāo)簽名的所有元素，這個(gè)方法將返回一個(gè)節(jié)點(diǎn)集合，這個(gè)集合可以當(dāng)作一個(gè)數(shù)組來處理。這個(gè)集合的 length 屬性等于當(dāng)前文檔里有著給定標(biāo)簽名的所有元素的總個(gè)數(shù)。
   var elements = document.getElementsByTagName(tagName);
   var elements = element.getElementsByTagName(tagName);
該方法不必非得用在整個(gè)文檔上。它也可以用來在某個(gè)特定元素的子節(jié)點(diǎn)當(dāng)中尋找有著給定標(biāo)簽名的元素。
   var container =   document.getElementById(“sid”);
   var elements = container.getElementsByTagName(“p”);
   alert(elements .length);

// //處理input// var inputElements=document.getElementsByTagName("input");// //輸出input標(biāo)簽的長度// //alert(inputElements.length);// for(var i=0;i<inputElements.length;i++){// if(inputElements[i].type!='button'){//submit// alert(inputElements[i].value);// }// }//處理select// //獲取select標(biāo)簽// var selectElements=document.getElementsByTagName("select");// //獲取select下的子標(biāo)簽// 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].onchange=function(){ alert(this.value); } }

八、parentNode、firstChild以及l(fā)astChild

這三個(gè)屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結(jié)構(gòu)，在文檔中進(jìn)行“短距離的旅行”。
請看下面這個(gè) HTML 片段：

在上面的HTML代碼中，第一個(gè) <td> 是 <tr> 元素的首個(gè)子元素（firstChild），而最后一個(gè) <td> 是 <tr>元素的最后一個(gè)子元素（lastChild）。
此外，<tr> 是每個(gè) <td>元 素的父節(jié)點(diǎn)（parentNode）。

 var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i < textareaElements.length; i++) { textareaElements[i].onchange = function(){ alert(this.value); }; }
 

九、查看是否存在子節(jié)點(diǎn)

hasChildNodes() 
該方法用來檢查一個(gè)元素是否有子節(jié)點(diǎn)，返回值是 true 或 false.
  var booleanValue = element.hasChildNodes();
文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能再包含任何子節(jié)點(diǎn)，所以對這兩類節(jié)點(diǎn)使用 hasChildNodes 方法的返回值永遠(yuǎn)是 false.
如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數(shù)組和空字符串。

hasChildNodes()

 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());}
 

十、根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn)：
document.documentElement
document.body
第一個(gè)屬性可返回存在于 XML 以及 HTML 文檔中的文檔根節(jié)點(diǎn)。
第二個(gè)屬性是對 HTML 頁面的特殊擴(kuò)展，提供了對 <body> 標(biāo)簽的直接訪問。

十一、DOM節(jié)點(diǎn)信息

每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：
nodeName（節(jié)點(diǎn)名稱）

nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。
var name = node.nodeName;
元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱
屬性節(jié)點(diǎn)的 nodeName 是屬性名稱
文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
注釋：nodeName 所包含的 html 元素的標(biāo)簽名稱永遠(yuǎn)是大寫的

nodeValue（節(jié)點(diǎn)值）

nodeValue：返回給定節(jié)點(diǎn)的當(dāng)前值（字符串）
 如果給定節(jié)點(diǎn)是一個(gè)屬性節(jié)點(diǎn)，返回值是這個(gè)屬性的值。
 如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn)，返回值是這個(gè)文本節(jié)點(diǎn)的內(nèi)容。
 如果給定節(jié)點(diǎn)是一個(gè)元素節(jié)點(diǎn)，返回值是 null
 nodeValue 是一個(gè) 讀/寫 屬性，但不能對元素節(jié)點(diǎn)的 nodeValue 屬性設(shè)置值，
    但可以為文本節(jié)點(diǎn)的 nodeValue 屬性設(shè)置一個(gè)值。
   var li = document.getElementById(“l(fā)i”);
   if(li.firstChild.nodeType == 3)
      li.firstChild.nodeValue = “國慶60年”;

nodeType（節(jié)點(diǎn)類型）

nodeType：返回一個(gè)整數(shù)，這個(gè)數(shù)值代表著給定節(jié)點(diǎn)的類型。
nodeType 屬性返回的整數(shù)值對應(yīng)著 12 種節(jié)點(diǎn)類型,常用的有三種：
Node.ELEMENT_NODE    ---1    -- 元素節(jié)點(diǎn)
Node.ATTRIBUTE_NODE  ---2    -- 屬性節(jié)點(diǎn)
Node.TEXT_NODE       ---3    -- 文本節(jié)點(diǎn)
nodeType 是個(gè)只讀屬性

最新評論