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);//擷取

标簽容器封裝的内容：城市首頁

//給頁面當中的所有

标簽添加 target屬性 //給對象添加屬性并指派時，若屬性不存在則是添加，若存在則是修改

for(var x=0; x

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

nodes[x].target = "_blank";

2）擷取

标簽下的所有

節點 function getNodeDemo4(){ var divNode = document.getElementById("mylink"); var nodes = divNode.getElementsByTagName("a");//隻擷取divNode元素下面的所有子節點 五、利用節點的層次關系(level)擷取節點的方法 父節點：parentNode屬性 子節點：childNodes集合, firstChild() , lastChild() 上一個兄弟節點：previousSibling屬性 下一個兄弟節點：nextSibling屬性 1、擷取父節點 var tabNode = document.getElementById("tableid1"); var node = tabNode.parentNode; 2、擷取子節點 var nodes = tabNode.childNodes; 注意：1）如果 後面有回車符，高版本的IE和火狐會識别成 “空白文本”#text，而低版本IE會直接越過-----不光是 節點，其它節點也一樣 2）表格的, 标簽和标簽中間，其實還隐藏着一個标簽----表格體 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="建立的按鈕"; divNode.appendChild(oBtnNode); 3、直接利用容器标簽中的一個屬性：innerHTML-----本質上改該标簽容器中的“html代碼”，不是我們認為的對象樹的操作 function createAndAdd3(){ //divNode.innerHTML=" "; divNode.innerHTML=" "; 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 oDivNode4 = document.getElementById("div4"); //oDivNode.replaceNode(oDivNode4); //通過父節點去替換它的孩子：用oDivNode4去替換oDivNode oDivNode.parentNode.replaceChild(oDivNode4,oDivNode); 6、替換節點(克隆替換) function updateNode2(){ var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一個對象,預設參數為false。參數為true時，連子節點一起克隆 //通過父節點去替換它的孩子：用oDivNode4_2去替換oDivNode oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);