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

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

文檔對象模型（DOM）是一個可以讓程序和腳本動態訪問和更新文檔內容、結構和樣式的語言平臺， 提供了標準的 HTML 和 XML 對象集， 並有一個標準的接口來訪問並操

做它們。 」它使得程序員能夠很快捷地訪問 HTML 或 XML 頁面上的標準組件，如元素、樣式表、腳本等等並做相應的處理。DOM 標準推出以前，建立前端 Web 應用程序都必須使用

Java Applet 或 ActiveX 等複雜的組件， 如今基於 DOM 規範， 在支持 DOM 的瀏覽器環境中，Web開發人員能夠很快捷、 安全地建立多樣化、 功能強大的Web應用程序。 這裏只討論

HTML DOM。

1、DOM概述

一、文檔對象模型定義了 JavaScript 能夠進行操做的瀏覽器，描述了文檔對象的邏輯結構及各功能部件的標準接口。主要包括以下方面：

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

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

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

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

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

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

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

2）文檔對象模型 （DOM）

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

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

2、主要做用

主要用來將標記型文檔封裝成對象，並將標記型文檔中的全部內容(標籤、文本、屬性等)都封裝成對象。

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

對象： 封裝了屬性和方法，能夠調用裏面的屬性和方法。

模型：全部標記型文檔都具有一些共性特徵的體現。

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

一、DOM樹模型：

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

標籤、屬性和文本內容稱爲節點(node)，節點也稱爲對象，標籤一般也稱爲頁面中的元素(element)

1）DOM技術的核心內容：

把標記文檔變成對象樹，經過對樹中的對象進行操做，實現對文檔內容的操縱。

2）DOM解析的方式：

將標記文檔解析成一棵DOM對象樹，並將樹中的內容都封裝成對象。----這些動做由瀏覽器幫咱們完成

3）DOM解析的好處：

能夠對樹中的節點進行任意的操做：增刪改查

4）DOM解析的弊端：

這種解析須要將整個標記型文檔加載進內存，所以，若是標記型文檔很，耗內存。

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

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

三、HTML:提供標籤，封裝數據

四、CSS：提供樣式屬性，對數據的顯示樣式進行定義

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

六、JS: 提供程序設計語言，經過DOM來操縱文檔內容和顯示樣式

4、 DOM中獲取節點的方法

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

節點的類型： 標籤節點的類型值爲1，屬性節點的類型值爲2，文本節點的類型值爲3

節點值：標籤型節點是null,沒有值的。只有屬性和文本節點才能夠有值。

一、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");

}

二、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"));

}

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

1）獲取document下的全部

function getNodeDemo3(){

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

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

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

//給頁面當中的全部標籤添加 target屬性 //給對象添加屬性並賦值時，若屬性不存在則是添加，若存在則是修改

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

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

nodes[x].target = "_blank";

}

}

2）獲取<div>標籤下的全部節點

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";

}

}

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

父節點：parentNode屬性

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

上一個兄弟節點：previousSibling屬性

下一個兄弟節點：nextSibling屬性

一、獲取父節點

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

var node = tabNode.parentNode;

二、獲取子節點

var nodes = tabNode.childNodes;

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

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

三、獲取兄弟節點

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

alert(node.nodeName);//div

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

alert(node.nodeName);//dl

6、DOM中的一些操做

一、建立文本對象

function createAndAdd1(){

//1利用createTextNode()建立一個文本對象

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

//2獲取div對象

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

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

divNode.appendChild(oTextNode);

}

二、建立標籤對象

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

}

三、直接利用容器標籤中的一個屬性：innerHTML-----本質上改該標籤容器中的「html代碼」，不是咱們認爲的對象樹的操做

function createAndAdd3(){

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

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

divNode.innerHTML="一個超連接 ";

}

四、刪除節點 利用標籤容器對象中的removeChild()和removeNode(),前者刪子節點，後者刪本身----不建議使用

function deleteNode(){

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

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

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

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

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

oDivNode.parentNode.removeChild(oDivNode);

}

五、替換節點(移除替換) 利用標籤容器對象中的replaceChild()和replaceNode(),前者替換子節點，後者替換本身----不建議使用

function updateNode(){

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

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

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

//oDivNode.replaceNode(oDivNode4);

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

oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);

}

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

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

}