好程序員分享JavaScript之-文檔對象模型(DOM)

好程序員分享JavaScript之 -文檔對象模型(DOM)：DOM -----Document Object Model

文檔對象模型（DOM）是一個能夠讓程序和腳本動態(tài)訪問和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的語言平臺， 提供了標準的 HTML 和 XML 對象集， 并有一個標準的接口來訪問并操

作它們。 ”它使得程序員可以很快捷地訪問 HTML 或 XML 頁面上的標準組件，如元素、樣式表、腳本等等并作相應的處理。DOM 標準推出之前，創(chuàng)建前端 Web 應用程序都必須使用

Java Applet 或 ActiveX 等復雜的組件， 現(xiàn)在基于 DOM 規(guī)范， 在支持 DOM 的瀏覽器環(huán)境中，Web開發(fā)人員可以很快捷、 安全地創(chuàng)建多樣化、 功能強大的Web應用程序。 這里只討論

HTML DOM。

一、DOM概述

1、文檔對象模型定義了 JavaScript 可以進行操作的瀏覽器，描述了文檔對象的邏輯結(jié)構(gòu)及各功能部件的標準接口。主要包括如下方面：

1）核心 JavaScript 語言參考（數(shù)據(jù)類型、運算符、基本語句、函數(shù)等）

2）與數(shù)據(jù)類型相關的核心對象（String、Array、Math、Date 等數(shù)據(jù)類型）

3）瀏覽器對象（window、location、history、navigator 等）

4）文檔對象（document、images、form 等）

2、JavaScript 中兩種主要的對象模型

1）瀏覽器對象模型 （BOM）

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

2）文檔對象模型 （DOM）

提供了訪問瀏覽器窗口內(nèi)容，如文檔、圖片等各種 HTML 元素以及這些元素包含的文本的操作方法。

在早期的瀏覽器版本中，瀏覽器對象模型和文檔對象模型之間沒有很大的區(qū)別。

二、主要作用

主要用來將標記型文檔封裝成對象，并將標記型文檔中的所有內(nèi)容(標簽、文本、屬性等)都封裝成對象。

文檔：標記型文檔----標簽、文本、屬性等

對象： 封裝了屬性和方法，可以調(diào)用里面的屬性和方法。

模型：所有標記型文檔都具備一些共性特征的體現(xiàn)。

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

1、DOM樹模型：

DOM解析將按照標簽的層次體現(xiàn)出標簽的所屬，形成一個樹狀結(jié)構(gòu)---DOM樹。

標簽、屬性和文本內(nèi)容稱為節(jié)點(node)，節(jié)點也稱為對象，標簽通常也稱為頁面中的元素(element)

1）DOM技術(shù)的核心內(nèi)容：

把標記文檔變成對象樹，通過對樹中的對象進行操作，實現(xiàn)對文檔內(nèi)容的操縱。

2）DOM解析的方式：

將標記文檔解析成一棵DOM對象樹，并將樹中的內(nèi)容都封裝成對象。----這些動作由瀏覽器幫我們完成

3）DOM解析的好處：

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

4）DOM解析的弊端：

這種解析需要將整個標記型文檔加載進內(nèi)存，因此，如果標記型文檔很，耗內(nèi)存。

2、DHTML：動態(tài)的HTML，它不是一門語言，是多項技術(shù)綜合體的簡稱。

以HTML+CSS的方式做的是靜態(tài)網(wǎng)頁，要想變成動態(tài)的，必須在此基礎上加入JS和DOM技術(shù)。因此，DHTML包含：HTML+CSS+JS+DOM

3、HTML:提供標簽，封裝數(shù)據(jù)

4、CSS：提供樣式屬性，對數(shù)據(jù)的顯示樣式進行定義

5、DOM: 把標記型文檔封裝成對象，供JS操縱

6、JS: 提供程序設計語言，通過DOM來操縱文檔內(nèi)容和顯示樣式

四、 DOM中獲取節(jié)點的方法

節(jié)點都具備三個必備屬性：節(jié)點名稱、節(jié)點類型、節(jié)點值。

節(jié)點的類型： 標簽節(jié)點的類型值為1，屬性節(jié)點的類型值為2，文本節(jié)點的類型值為3

節(jié)點值：標簽型節(jié)點是null,沒有值的。只有屬性和文本節(jié)點才可以有值。

1、getElementById() :通過節(jié)點的id獲取該節(jié)點對象

function getNodeDemo1(){

//獲取id為divid1的節(jié)點

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

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

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

//獲取div節(jié)點中的文本 innerHTML innerText 屬性

var txtHTML = divNode.innerHTML;

var txt = divNode.innerText;

alert(txtHTML+","+txt);

//更改div節(jié)點中的文本內(nèi)容

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

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

}

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

function getNodeDemo2(){

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

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

//alert(node);//因為是數(shù)組，所以是集合

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

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

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

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

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

}

3、getElementsByTagName() :通過節(jié)點的標簽名字獲取節(jié)點集合

1）獲取document下的所有

function getNodeDemo3(){

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

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

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

//給頁面當中的所有<a>標簽添加 target屬性 //給對象添加屬性并賦值時，若屬性不存在則是添加，若存在則是修改

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

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

nodes[x].target = "_blank";

}

}

2）獲取<div>標簽下的所有<a>節(jié)點

function getNodeDemo4(){

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

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

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

nodes[x].target = "_blank";

}

}

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

父節(jié)點：parentNode屬性

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

上一個兄弟節(jié)點：previousSibling屬性

下一個兄弟節(jié)點：nextSibling屬性

1、獲取父節(jié)點

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

var node = tabNode.parentNode;

2、獲取子節(jié)點

var nodes = tabNode.childNodes;

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

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

3、獲取兄弟節(jié)點

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

alert(node.nodeName);//div

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

alert(node.nodeName);//dl

六、DOM中的一些操作

1、創(chuàng)建文本對象

function createAndAdd1(){

//1利用createTextNode()創(chuàng)建一個文本對象

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

//2獲取div對象

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

//3把oTextNode添加成div對象的孩子

divNode.appendChild(oTextNode);

}

2、創(chuàng)建標簽對象

function createAndAdd2(){

//1利用createElement()創(chuàng)建一個標簽對象

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-----本質(zhì)上改該標簽容器中的“html代碼”，不是我們認為的對象樹的操作

function createAndAdd3(){

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

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

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

}

4、刪除節(jié)點 利用標簽容器對象中的removeChild()和removeNode(),前者刪子節(jié)點，后者刪自己----不建議使用

function deleteNode(){

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

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

//oDivNode.removeNode();//默認false,不刪除子節(jié)點集合

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

//通過父節(jié)點去刪除它的孩子

oDivNode.parentNode.removeChild(oDivNode);

}

5、替換節(jié)點(移除替換) 利用標簽容器對象中的replaceChild()和replaceNode(),前者替換子節(jié)點，后者替換自己----不建議使用

function updateNode(){

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

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

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

//oDivNode.replaceNode(oDivNode4);

//通過父節(jié)點去替換它的孩子：用oDivNode4去替換oDivNode

oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);

}

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

function updateNode2(){

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

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

var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一個對象,默認參數(shù)為false。參數(shù)為true時，連子節(jié)點一起克隆

//通過父節(jié)點去替換它的孩子：用oDivNode4_2去替換oDivNode

oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);

}