好程式設計師分享JavaScript之-文件物件模型(DOM)

好程式設計師分享JavaScript之 -文件物件模型(DOM) ：DOM -----Document Object Model

文件物件模型（DOM）是一個能夠讓程式和指令碼動態訪問和更新文件內容、結構和樣式的語言平臺， 提供了標準的 HTML 和 XML 物件集， 並有一個標準的介面來訪問並操

作它們。 ”它使得程式設計師可以很快捷地訪問 HTML 或 XML 頁面上的標準元件，如元素、樣式表、指令碼等等並作相應的處理。DOM 標準推出之前，建立前端 Web 應用程式都必須使用

Java Applet 或 ActiveX 等複雜的元件， 現在基於 DOM 規範， 在支援 DOM 的瀏覽器環境中，Web開發人員可以很快捷、 安全地建立多樣化、 功能強大的Web應用程式。 這裡只討論

HTML DOM。

一、DOM概述

1、文件物件模型定義了 JavaScript 可以進行操作的瀏覽器，描述了文件物件的邏輯結構及各功能部件的標準介面。主要包括如下方面：

1）核心 JavaScript 語言參考（資料型別、運算子、基本語句、函式等）

2）與資料型別相關的核心物件（String、Array、Math、Date 等資料型別）

3）瀏覽器物件（window、location、history、navigator 等）

4）文件物件（document、images、form 等）

2、JavaScript 中兩種主要的物件模型

1）瀏覽器物件模型 （BOM）

提供了訪問瀏覽器各個功能部件，如瀏覽器視窗本身、瀏覽歷史等的操作方法。（見前一篇）

2）文件物件模型 （DOM）

提供了訪問瀏覽器視窗內容，如文件、圖片等各種 HTML 元素以及這些元素包含的文字的操作方法。

在早期的瀏覽器版本中，瀏覽器物件模型和文件物件模型之間沒有很大的區別。

二、主要作用

主要用來將標記型文件封裝成物件，並將標記型文件中的所有內容(標籤、文字、屬性等)都封裝成物件。

文件：標記型文件----標籤、文字、屬性等

物件：  封裝了屬性和方法，可以呼叫裡面的屬性和方法。

模型：所有標記型文件都具備一些共性特徵的體現。

三、一些重要的概念（主要DOM樹）

1、DOM樹模型：

DOM解析將按照標籤的層次體現出標籤的所屬，形成一個樹狀結構---DOM樹。

標籤、屬性和文字內容稱為節點(node)，節點也稱為物件，標籤通常也稱為頁面中的元素(element)

1）DOM技術的核心內容：

把標記文件變成物件樹，透過對樹中的物件進行操作，實現對文件內容的操縱。

2）DOM解析的方式：

將標記文件解析成一棵DOM物件樹，並將樹中的內容都封裝成物件。----這些動作由瀏覽器幫我們完成

3）DOM解析的好處：

可以對樹中的節點進行任意的操作：增刪改查

4）DOM解析的弊端：

這種解析需要將整個標記型文件載入進記憶體，因此，如果標記型文件很，耗記憶體。

2、DHTML：動態的HTML，它不是一門語言，是多項技術綜合體的簡稱。

以HTML+CSS的方式做的是靜態網頁，要想變成動態的，必須在此基礎上加入JS和DOM技術。因此，DHTML包含：HTML+CSS+JS+DOM

3、HTML:提供標籤，封裝資料

4、CSS：提供樣式屬性，對資料的顯示樣式進行定義

5、DOM: 把標記型文件封裝成物件，供JS操縱

6、JS: 提供程式設計語言，透過DOM來操縱文件內容和顯示樣式

四、 DOM中獲取節點的方法

節點都具備三個必備屬性：節點名稱、節點型別、節點值。

節點的型別：  標籤節點的型別值為1，屬性節點的型別值為2，文字節點的型別值為3

節點值：標籤型節點是null,沒有值的。只有屬性和文字節點才可以有值。

1、getElementById() :透過節點的id獲取該節點物件

function getNodeDemo1(){

//獲取id為divid1的節點

//var divNode= document.getElementById("divid1");

var divNode= document.getElementById("divid2");

//alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);

//獲取div節點中的文字 innerHTML innerText 屬性

var txtHTML = divNode.innerHTML;

var txt = divNode.innerText;

alert(txtHTML+","+txt);

//更改div節點中的文字內容

//divNode.innerHTML="我把它改成** 城市學院了....";

divNode.innerHTML="我把它改成** 城市學院了....".fontcolor("red");

}

2、getElementsByName() :透過節點的name屬性獲取節點集合----注意，是集合

function getNodeDemo2(){

var node = document.getElementsByName("userName");

//alert(node.nodeName);//undefined

//alert(node);//因為是陣列，所以是集合

//alert(node[0].nodeName);//INPUT

//alert(node.length);//1

//alert(node[0].nodeType);//1

alert(node[0].nodeValue);//標籤型節點的value都是null

//alert(node[0].getAttribute("value"));

}

3、getElementsByTagName() :透過節點的標籤名字獲取節點集合

1）獲取document下的所有

function getNodeDemo3(){

var nodes = document.getElementsByTagName("a");

//alert(nodes.length);//5

//alert(nodes[0].innerHTML);//獲取<a>標籤容器封裝的內容：城市首頁

//給頁面當中的所有<a>標籤新增 target屬性 //給物件新增屬性並賦值時，若屬性不存在則是新增，若存在則是修改

for(var x=0; x<nodes.length; x++){

//alert(nodes[x].innerHTML);

nodes[x].target = "_blank";

}

}

2）獲取<div>標籤下的所有<a>節點

function getNodeDemo4(){

var divNode = document.getElementById("mylink");

var nodes = divNode.getElementsByTagName("a");//只獲取divNode元素下面的所有子節點

for(var x=0; x<nodes.length; x++){

nodes[x].target = "_blank";

}

}

五、利用節點的層次關係(level)獲取節點的方法

父節點：parentNode屬性

子節點：childNodes集合, firstChild() , lastChild()

上一個兄弟節點：previousSibling屬性

下一個兄弟節點：nextSibling屬性

1、獲取父節點

var tabNode = document.getElementById("tableid1");

var node = tabNode.parentNode;

2、獲取子節點

var nodes = tabNode.childNodes;

注意：1）如果<table>後面有回車符，高版本的IE和火狐會識別成 “空白文字”#text，而低版本IE會直接越過-----不光是<table>節點，其它節點也一樣

2）表格的,<table>標籤和<tr>標籤中間，其實還隱藏著一個<tbody>標籤----表格體

3、獲取兄弟節點

var node = tabNode.previousSibling.previousSibling;//上一個兄弟

alert(node.nodeName);//div

var node = tabNode.nextSibling.nextSibling;//上一個兄弟

alert(node.nodeName);//dl

六、DOM中的一些操作

1、建立文字物件

function createAndAdd1(){

//1利用createTextNode()建立一個文字物件

var oTextNode = document.createTextNode("新的文字，很好！");

//2獲取div物件

var divNode = document.getElementById("div1");

//3把oTextNode新增成div物件的孩子

divNode.appendChild(oTextNode);

}

2、建立標籤物件

function createAndAdd2(){

//1利用createElement()建立一個標籤物件

var oBtnNode = document.createElement("input");

oBtnNode.type="button";

oBtnNode.value="新建的按鈕";

//2獲取div物件

var divNode = document.getElementById("div1");

//3把oTextNode新增成div物件的孩子

divNode.appendChild(oBtnNode);

}

3、直接利用容器標籤中的一個屬性：innerHTML-----本質上改該標籤容器中的“html程式碼”，不是我們認為的物件樹的操作

function createAndAdd3(){

var divNode = document.getElementById("div1");

//divNode.innerHTML="<input type='button' value='一個新按鈕'/> ";

divNode.innerHTML="<a href='http://********'>一個超連結</a> ";

}

4、刪除節點 利用標籤容器物件中的removeChild()和removeNode(),前者刪子節點，後者刪自己----不建議使用

function deleteNode(){

var oDivNode = document.getElementById("div2");

//自殺式----不建議

//oDivNode.removeNode();//預設false,不刪除子節點集合

//oDivNode.removeNode(true);//true,刪除子節點集合

//透過父節點去刪除它的孩子

oDivNode.parentNode.removeChild(oDivNode);

}

5、替換節點(移除替換) 利用標籤容器物件中的replaceChild()和replaceNode(),前者替換子節點，後者替換自己----不建議使用

function updateNode(){

var oDivNode = document.getElementById("div2");

var oDivNode4 = document.getElementById("div4");

//自殺式----不建議

//oDivNode.replaceNode(oDivNode4);

//透過父節點去替換它的孩子：用oDivNode4去替換oDivNode

oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);

}

6、替換節點(克隆替換)

function updateNode2(){

var oDivNode = document.getElementById("div2");

var oDivNode4 = document.getElementById("div4");

var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一個物件,預設引數為false。引數為true時，連子節點一起克隆

//透過父節點去替換它的孩子：用oDivNode4_2去替換oDivNode

oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);

}