好程序員分享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);

}