dom總結(2012.11.30)

DOM

DOM分爲HTML DOM和XML DOM兩種。它們分別定義了訪問和操作HTML/XML文檔的標準方法，並將對應的文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）

1）DOM樹定義了HTML/XML文檔的邏輯結構，給出了一種應用程序訪問和處理XML文檔的方法。

2）在DOM樹中，有一個根節點，所有其他的節點都是根節點的後代。

3) 在應用過程中，基於DOM的HTML/XML分析器將一個HTML/XML文檔轉換成一棵DOM樹，應用程序通過對DOM樹的操作，來實現對HTML/XML文檔數據的操作。

DOM= Document Object Model，文檔對象模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。有一點很重要，DOM的設計是以對象管理組織（OMG）的規約爲基礎的，因此可以用於任何編程語言.

• D：文檔– html 文檔或 xml 文檔

• O：對象– document 對象的屬性和方法

• M：模型

• DOM 是針對xml(html)的基於樹的API。

• DOM樹:節點（node）的層次。

• DOM 把一個文檔表示爲一棵家譜樹（父，子，兄弟）

• DOM定義了Node的接口以及許多種節點類型來表示XML節點的多個方面

DOM的結構

<html>:

<head>

</head>

<body>

<h1>DOM的結構</h1>

</body>

</html>

html是根節點，head，body是html的子節點，title是head的子節點，body是h1，p的父節點

節點

l 根據 DOM，HTML 文檔中的每個成分都是一個節點。DOM 是這樣規定的：

• 整個文檔是一個文檔節點

• 每個 HTML 標籤是一個元素節點

• 包含在 HTML 元素中的文本是文本節點

• 每一個 HTML 屬性是一個屬性節點

• 註釋屬於註釋節點

Node 層次

l 節點彼此都有等級關係。

HTML 文檔中的所有節點組成了一個文檔樹（或節點樹）。HTML 文檔中的每個元素、屬性、文本等都代表着樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文本節點爲止。

節點及其類型

l 節點

由結構圖中我們可以看到，整個文檔就是一個文檔節點。

而每一個HMTL標籤都是一個元素節點。

標籤中的文字則是文本節點。

標籤的屬性是屬性節點。

一切都是節點……

l 節點樹

節點樹的概念從圖中一目瞭然，最上面的就是“樹根”了。節點之間有父子關係，祖先與子孫關係，兄妹關係。這些關係從圖中也很好看出來，直接連線的就是父子關係了。而有一個父親的就是兄妹關係……

NODE接口的特性和方法

特性/方法	類型/返回類型	說明
nodeName	String	節點的名字；根據節點的類型而定義
nodeValue	String	節點的值；根據節點的類型而定義
nodeType	Number	節點的類型常量值之一
ownerDocument	Document	指向這個節點所屬的文檔
firstChild	Node	指向在childNodes列表中的第一個節點
lastChild	Node	指向在childNodes列表中的最後一個節點
childNodes	NodeList	所有子節點的列表
previousSibling	Node	指向前一個兄弟節點；如果這個節點就是第一個兄弟節點，那麼該值爲null
nextSibling	Node	指向後一個兄弟節點；如果這個節點就是最後一個兄弟節點，那麼該值爲null
hasChildNodes()	Boolean	當childNodes包含一個或多個節點時，返回真
attributes	NamedNodeMap	包含了代表一個元素的特性的Attr對象；僅用於 Element節點
appendChild(node)	Node	將node添加到childNodes的末尾
removeChild(node)	Node	從childNodes中刪除node
replaceChild (newnode, oldnode)	Node	將childNodes中的oldnode替換成newnode
insertBefore (newnode, refnode)	Node	在childNodes中的refnode之前插入newnode

查找並訪問節點

你可通過若干種方法來查找您希望操作的元素：

通過使用 getElementById() 和 getElementsByTagName() 方法

通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性

查找元素節點

1）getElementById()

var element = document.getElementById ( ID )

2）getElementsByName()

<input type="text" name="tname" value="國慶60年_1" /><br>

<input type="text" name="tname" value="國慶60年_2" /><br>

<input type="text" name="tname" value="國慶60年_3" /><br>

function test(){

var tnameArray=document.getElementsByName("tname");

alert(tnameArray.length);

for(var i=0;i<tnameArray.length;i++){

window.alert(tnameArray[i].value);

}

3）getElementsByTagName()

var elements = document.getElementsByTagName(tagName);

var elements = element.getElementsByTagName(tagName);

或

var container = document.getElementById(“sid”);

var elements = container.getElementsByTagName(“p”);

alert(elements .length);

處理input

var inputElements=document.getElementsByTagName("input");

//輸出input標籤的長度

alert(inputElements.length);

for(var i=0;i<inputElements.length;i++){

if(inputElements[i].type!='button'){

alert(inputElements[i].value);

}

處理select

//獲取select標籤

var selectElements=document.getElementsByTagName("select");

//獲取select下的子標籤

for(var j=0;j<selectElements.length;j++){

var optionElements=selectElements[j].getElementsByTagName("option");

for(var i=0;i<optionElements.length;i++){

alert(optionElements[i].value);

}

一些常用的訪問節點的屬性及用法

parentNode：父節點、firstChil：第一個子節點、lastChild最後一個子節點

hasChildNodes() :該方法用來檢查一個元素是否有子節點，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.

如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數組和空字符串。

Document。documentElement：返回存在於 XML 以及 HTML 文檔中的文檔根節點

document.body ：是對 HTML 頁面的特殊擴展，提供了對 <body> 標籤的直接訪問

nodeName（節點名稱）

nodeValue（節點值）

nodeType（節點類型）

注：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的

nodeName 是一個只讀屬性。

案例：

獲取節點的名稱及value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<h1>

你好，kouxiaolin

</h1>

</body>

</html>

<scripttype="text/javascript">

<!--

window.onload=function(){

var root=document.documentElement;

alert("跟標籤的名稱："+root.nodeName);

var ss=root.firstChild;

alert("root的第一個子標籤head："+ss.nodeName);

var ee=root.lastChild;

alert("root的最後一個子標籤body："+ee.nodeName);

var body=document.body;

alert("body標籤："+body.nodeName);

var h1=body.firstChild;

alert("body標籤的第一個子標籤h1："+h1.nodeName);

var tt=h1.firstChild;

alert("h1標籤的子標籤名稱："+tt.nodeName);

alert("h1標籤的文本內容："+tt.nodeValue);

}

// -->

</script>

遍歷select中所有的option對象的文本值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

window.onload = function() {

//通過getElementById("edu")方法獲取select的對象

var edus = document.getElementById("edu");

//通過select中options集合獲取所有的option對象

var edus1 = edus.options;

var msg ="";

//遍歷所有的option對象的文本值

for(var i=0;i<edus1.length;i++){

msg+=edus1[i].innerHTML+",";

}

//把獲取的msg信息寫入到showMsg的div中

document.getElementById("showMsg").innerHTML=msg;

}

</script>

</head>

<body>

<div>

用戶名:<input type="text" name="name" />

學歷:<select id="edu" name="education">

</select>

</form>

</div>

用戶的學歷是：

</div>

</body>

</html>

或

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

window.onload = function() {

//通過getElementById("edu")方法獲取select的對象

var edus = document.getElementById("edu");

var edus1 = edus.childNodes;

alert(edus1.length);

var fc = edus.firstChild;

alert(fc.nodeName);

var lc = edus.lastChild;

alert(lc.nodeName);

var llc = lc.firstChild;

alert(llc.nodeValue);

var msg = "";

for ( var i = 0; i < edus1.length; i++) {

if (edus1[i].nodeType == 1)

msg += edus1[i].lastChild.nodeValue + ",";

}

document.getElementById("showMsg").innerHTML = msg;

}

</script>

</head>

<body>

<div>

用戶名:

學歷:

大專生

</option>

本科生

</option>

碩士生

</option>

博士生

</option>

</select>

</form>

</div>

用戶的學歷是：

</div>

</body>

</html>

站內首發文章

f369504543

發佈了54 篇原創文章 · 獲贊 61 · 訪問量 12萬+

私信關注

dom總結(2012.11.30)

DAPPER 事務 TRANSACTION

jslider(拖動條)圖片放大縮小功能（2012.4.03）

js跨域、異步上傳分析(2013.01.18)

Linux之路，起步雖晚，邁步纔會成功(2013.08.09)

Jetty之servlet容器(2011.11.09)

FireFox中file控件不能取到客戶端文件的完整路徑的問題(2012.11.27)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結