JavaScript的總結（三、DOM）

概述

         關於DOM的理論上面（JavaScript總結（一：基本概念））已經講過了，下面主要講的就是DOM裡面具體的東西了，瀏覽器支援JavaScript後，就為使用者提供了相應的API函數，我們通過DOM機制操作文檔的時候，只需要調用相應的API就可以了。瀏覽器在接收到HTML文檔後，會將其解釋為一顆樹，並以此來進行管理，具體如：

 

        下面說一下DOM的中一些API，看看我們是如果通過這些系統為我們提供好了的函數來訪問並操控HTML文檔中的內容的。

常用DOM

//通過某種方式來獲得HTML中相應的標籤//通過標籤id屬性訪問某一元素var objElement = document.getElementById("button1"); //button1為標籤的idalert(objElement.tagName);//通過標籤訪問一組元素(數組)var objElements = document.getElementsByTagName("input"); //input為HTML標籤alert(objElements[0].tagName);//通過name屬性訪問一組元素(數組)var objElementsN = document.getElementsByName("button"); //button為標籤的namealert(objElementsN[0].tagName);//從元素數組中取出某個元素的方法var obj = objElementsN[0];var obj = objElementsN.button1; //button1為標籤的idvar obj = objElementsN.item(0);//通過某個元素來訪問其父元素，子項目或同級元素var obj = objElement.parentNode;  //父元素，只能有一個var obj = objElement.previousSibling;   //同層上一個元素var obj = objElement.nextSibling; //同層下一個元素var obj = objElement.childNodes;  //子項目數組，子項目可能有多個標籤元素var obj = objElement.firstChild;  //第一個子項目var obj = objElement.lastChild;   //最後一個子項目//訪問元素內的內容（內容：開始標籤和結束之間的字串；內容為HTML(HTML標籤的嵌套)，需要解釋；內容為Text，直接顯示；）objElement.innerHTML：標籤修飾的內容為HTMLobjElement.innerText：標籤修飾的內容當成文本objElement.firstChild.nodeValue:相當於innerText屬性//訪問元素的屬性值，也可以設定alert(objElement.id);   //元素名.屬性名稱;這樣就可以操作元素的屬性值了objElement.setAttribute("屬性名稱",屬性值);//增加新的節點var objImg = document.createElement("img");  //建立一個新元素objImg.setAttribute("src","a.gif");  //為新元素設定相應的屬性值objFather.appendChild(objImg);  //為objFather元素添加一個子項目element.appendChild();