亚洲国产一区二区a毛片,婷婷亚洲综合五月天小说,亚洲色大情网站www

使用 DOM 節(jié)點(diǎn)時(shí)需要一些屬性和方法，因此我們首先來討論節(jié)點(diǎn)的屬性和方法。DOM 節(jié)點(diǎn)的屬性主要有：

nodeName報(bào)告節(jié)點(diǎn)的名稱（詳見下述）。
nodeValue提供節(jié)點(diǎn)的 “值”（詳見后述）。
parentNode返回節(jié)點(diǎn)的父節(jié)點(diǎn)。記住，每個(gè)元素、屬性和文本都有一個(gè)父節(jié)點(diǎn)。
childNodes是節(jié)點(diǎn)的孩子節(jié)點(diǎn)列表。對(duì)于 HTML，該列表僅對(duì)元素有意義，文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)都沒有孩子。
firstChild僅僅是childNodes列表中第一個(gè)節(jié)點(diǎn)的快捷方式。
lastChild是另一種快捷方式，表示childNodes列表中的最后一個(gè)節(jié)點(diǎn)。
previousSibling返回當(dāng)前節(jié)點(diǎn)之前的節(jié)點(diǎn)。換句話說，它返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的childNodes列表中位于該節(jié)點(diǎn)前面的那個(gè)節(jié)點(diǎn)（如果感到迷惑，重新讀前面一句）。
nextSibling類似于previousSibling屬性，返回父節(jié)點(diǎn)的childNodes列表中的下一個(gè)節(jié)點(diǎn)。
attributes僅用于元素節(jié)點(diǎn)，返回元素的屬性列表。

其他少數(shù)幾種屬性實(shí)際上僅用于更一般的 XML 文檔，在處理基于 HTML 的網(wǎng)頁時(shí)沒有多少用處。

上述大部分屬性的意義都很明確，除了nodeName和nodeValue屬性以外。我們不是簡(jiǎn)單地解釋這兩個(gè)屬性，而是提出兩個(gè)奇怪的問題：文本節(jié)點(diǎn)的nodeName應(yīng)該是什么？類似地，元素的nodeValue應(yīng)該是什么？

如果這些問題難住了您，那么您就已經(jīng)了解了這些屬性固有的含糊性。nodeName和nodeValue實(shí)際上并非適用于所有節(jié)點(diǎn)類型（節(jié)點(diǎn)的其他少數(shù)幾個(gè)屬性也是如此）。這就說明了一個(gè)重要概念：任何這些屬性都可能返回空值（有時(shí)候在 JavaScript 中稱為 “未定義”）。比方說，文本節(jié)點(diǎn)的nodeName屬性是空值（或者在一些瀏覽器中稱為 “未定義”），因?yàn)槲谋竟?jié)點(diǎn)沒有名稱。如您所料，nodeValue返回節(jié)點(diǎn)的文本。

類似地，元素有nodeName，即元素名，但元素的nodeValue屬性值總是空。屬性同時(shí)具有nodeName和nodeValue。下一節(jié)我還將討論這些單獨(dú)的類型，但是因?yàn)檫@些屬性是每個(gè)節(jié)點(diǎn)的一部分，因此在這里有必要提一提。

節(jié)點(diǎn)方法

接下來看看所有節(jié)點(diǎn)都具有的方法（與節(jié)點(diǎn)屬性一樣，我省略了實(shí)際上不適用于多數(shù) HTML DOM 操作的少數(shù)方法）：

insertBefore(newChild, referenceNode)將newChild節(jié)點(diǎn)插入到referenceNode之前。記住，應(yīng)該對(duì)newChild的目標(biāo)父節(jié)點(diǎn)調(diào)用該方法。
replaceChild(newChild, oldChild)用newChild節(jié)點(diǎn)替換oldChild節(jié)點(diǎn)。
removeChild(oldChild)從運(yùn)行該方法的節(jié)點(diǎn)中刪除oldChild節(jié)點(diǎn)。
appendChild(newChild)將newChild添加到運(yùn)行該函數(shù)的節(jié)點(diǎn)之中。newChild被添加到目標(biāo)節(jié)點(diǎn)孩子列表中的末端。
hasChildNodes()在調(diào)用該方法的節(jié)點(diǎn)有孩子時(shí)則返回 true，否則返回 false。
hasAttributes()在調(diào)用該方法的節(jié)點(diǎn)有屬性時(shí)則返回 true，否則返回 false。

注意，大部分情況下所有這些方法處理的都是節(jié)點(diǎn)的孩子。這是它們的主要用途。如果僅僅想獲取文本節(jié)點(diǎn)值或者元素名，則不需要調(diào)用這些方法，使用節(jié)點(diǎn)屬性就可以了。

通用節(jié)點(diǎn)類型

現(xiàn)在已經(jīng)介紹了 DOM 節(jié)點(diǎn)的一些特性和屬性（以及一些奇特的地方），下面開始講述您將用到的一些特殊節(jié)點(diǎn)類型。多數(shù) Web 應(yīng)用程序中只用到四種節(jié)點(diǎn)類型：

文檔節(jié)點(diǎn)表示整個(gè) HTML 文檔。
元素節(jié)點(diǎn)表示 HTML 元素，如a或img。
屬性節(jié)點(diǎn)表示 HTML 元素的屬性，如href（a元素）或src（img元素）。
文本節(jié)點(diǎn)表示 HTML 文檔中的文本，如 “Click on the link below for a complete set list”。這是出現(xiàn)在p、a或h2這些元素中的文字。

處理 HTML 時(shí)，95% 的時(shí)間是跟這些節(jié)點(diǎn)類型打交道。因此本文的其余部分將詳細(xì)討論這些節(jié)點(diǎn)。（將來討論 XML 的時(shí)候?qū)⒔榻B其他一些節(jié)點(diǎn)類型。）

文檔節(jié)點(diǎn)

基本上所有基于 DOM 的代碼中都要用到的第一個(gè)節(jié)點(diǎn)類型是文檔節(jié)點(diǎn)。文檔節(jié)點(diǎn)實(shí)際上并不是 HTML（或 XML）頁面中的一個(gè)元素而是頁面本身。因此在 HTML Web 頁面中，文檔節(jié)點(diǎn)就是整個(gè) DOM 樹。在 JavaScript 中，可以使用關(guān)鍵字document訪問文檔節(jié)點(diǎn)：

// These first two lines get the DOM tree for the current Web page,

// and then the <html> element for that DOM tree

var myDocument = document;

var htmlElement = myDocument.documentElement;

JavaScript 中的document關(guān)鍵字返回當(dāng)前網(wǎng)頁的 DOM 樹。從這里可以開始處理樹中的所有節(jié)點(diǎn)。

也可使用document對(duì)象創(chuàng)建新節(jié)點(diǎn)，如下所示：

createElement(elementName)使用給定的名稱創(chuàng)建一個(gè)元素。
createTextNode(text)使用提供的文本創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。
createAttribute(attributeName)用提供的名稱創(chuàng)建一個(gè)新屬性。

這里的關(guān)鍵在于這些方法創(chuàng)建節(jié)點(diǎn)，但是并沒有將其附加或者插入到特定的文檔中。因此，必須使用前面所述的方法如insertBefore()或appendChild()來完成這一步。因此，可使用下面的代碼創(chuàng)建新元素并將其添加到文檔中：

var pElement = myDocument.createElement("p");

var text = myDocument.createTextNode("Here's some text in a p element.");

pElement.appendChild(text);

bodyElement.appendChild(pElement);

一旦使用document元素獲得對(duì) Web 頁面 DOM 樹的訪問，就可以直接使用元素、屬性和文本了。

元素節(jié)點(diǎn)

雖然會(huì)大量使用元素節(jié)點(diǎn)，但很多需要對(duì)元素執(zhí)行的操作都是所有節(jié)點(diǎn)共有的方法和屬性，而不是元素特有的方法和屬性。元素只有兩組專有的方法：

與屬性處理有關(guān)的方法：
- getAttribute(name)返回名為name的屬性值。
- removeAttribute(name)刪除名為name的屬性。
- setAttribute(name, value)創(chuàng)建一個(gè)名為name的屬性并將其值設(shè)為value。
- getAttributeNode(name)返回名為name的屬性節(jié)點(diǎn)（屬性節(jié)點(diǎn)在下一節(jié) 介紹）。
- removeAttributeNode(node)刪除與指定節(jié)點(diǎn)匹配的屬性節(jié)點(diǎn)。
與查找嵌套元素有關(guān)的方法：
- getElementsByTagName(elementName)返回具有指定名稱的元素節(jié)點(diǎn)列表。

這些方法意義都很清楚，但還是來看幾個(gè)例子吧。

處理屬性

處理元素很簡(jiǎn)單，比如可用document對(duì)象和上述方法創(chuàng)建一個(gè)新的img元素：

var imgElement = document.createElement("img");

imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");

imgElement.setAttribute("width", "130");

imgElement.setAttribute("height", "150");

bodyElement.appendChild(imgElement);

現(xiàn)在看起來應(yīng)該非常簡(jiǎn)單了。實(shí)際上，只要理解了節(jié)點(diǎn)的概念并知道有哪些方法可用，就會(huì)發(fā)現(xiàn)在 Web 頁面和 JavaScript 代碼中處理 DOM 非常簡(jiǎn)單。在上述代碼中，JavaScript 創(chuàng)建了一個(gè)新的img元素，設(shè)置了一些屬性然后添加到 HTML 頁面的 body 元素中。

查找嵌套元素

發(fā)現(xiàn)嵌套的元素很容易。比如，下面的代碼用于發(fā)現(xiàn)和刪除清單 3 所示 HTML 頁面中的所有img元素：

// Remove all the top-level <img> elements in the body

if (bodyElement.hasChildNodes()) {

for (i=0; i<bodyElement.childNodes.length; i++) {

var currentNode = bodyElement.childNodes[i];

if (currentNode.nodeName.toLowerCase() == "img") {

bodyElement.removeChild(currentNode);

}

也可以使用getElementsByTagName()完成類似的功能：

// Remove all the top-level <img> elements in the body

var imgElements = bodyElement.getElementsByTagName("img");

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

var imgElement = imgElements.item[i];

bodyElement.removeChild(imgElement);

}

回頁首

屬性節(jié)點(diǎn)

DOM 將屬性表示成節(jié)點(diǎn)，可以通過元素的attributes來訪問元素的屬性，如下所示：

// Remove all the top-level <img> elements in the body

var imgElements = bodyElement.getElementsByTagName("img");

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

var imgElement = imgElements.item[i];

// Print out some information about this element

var msg = "Found an img element!";

var atts = imgElement.attributes;

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

var att = atts.item(j);

msg = msg + ""n " + att.nodeName + ": '" + att.nodeValue + "'";

}

alert(msg);

bodyElement.removeChild(imgElement);

}

屬性的奇特之處

對(duì)于 DOM 來說屬性有一些特殊的地方。一方面，屬性實(shí)際上并不像其他元素或文本那樣是元素的孩子，換句話說，屬性并不出現(xiàn)在元素 “之下”。同時(shí)，屬性顯然和元素有一定的關(guān)系，元素 “擁有” 屬性。DOM 使用節(jié)點(diǎn)表示屬性，并允許通過元素的專門列表來訪問屬性。因此屬性是 DOM 樹的一部分，但通常不出現(xiàn)在樹中。有理由說，屬性和 DOM 樹結(jié)構(gòu)其他部分之間的關(guān)系有點(diǎn)模糊。

需要指出的是，attributes屬性實(shí)際上是對(duì)節(jié)點(diǎn)類型而非局限于元素類型來說的。有點(diǎn)古怪，不影響您編寫代碼，但是仍然有必要知道這一點(diǎn)。

雖然也能使用屬性節(jié)點(diǎn)，但通常使用元素類的方法處理屬性更簡(jiǎn)單。其中包括：

getAttribute(name)返回名為name的屬性值。
removeAttribute(name)刪除名為name的屬性。
setAttribute(name, value)創(chuàng)建一個(gè)名為name的屬性并將其值設(shè)為value。

這三個(gè)方法不需要直接處理屬性節(jié)點(diǎn)。但允許使用簡(jiǎn)單的字符串屬性設(shè)置和刪除屬性及其值。

文本節(jié)點(diǎn)

需要考慮的最后一種節(jié)點(diǎn)是文本節(jié)點(diǎn)（至少在處理 HTML DOM 樹的時(shí)候如此）。基本上通常用于處理文本節(jié)點(diǎn)的所有屬性都屬于節(jié)點(diǎn)對(duì)象。實(shí)際上，一般使用nodeValue屬性來訪問文本節(jié)點(diǎn)的文本，如下所示：

var pElements = bodyElement.getElementsByTagName("p");

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

var pElement = pElements.item(i);

var text = pElement.firstChild.nodeValue;

alert(text);

}

少數(shù)其他幾種方法是專門用于文本節(jié)點(diǎn)的。這些方法用于增加或分解節(jié)點(diǎn)中的數(shù)據(jù)：

appendData(text)將提供的文本追加到文本節(jié)點(diǎn)的已有內(nèi)容之后。
insertData(position, text)允許在文本節(jié)點(diǎn)的中間插入數(shù)據(jù)。在指定的位置插入提供的文本。
replaceData(position, length, text)從指定位置開始刪除指定長(zhǎng)度的字符，用提供的文本代替刪除的文本。

回頁首

什么節(jié)點(diǎn)類型？

到目前為止看到的多數(shù)代碼都假設(shè)已經(jīng)知道處理的節(jié)點(diǎn)是什么類型，但情況并非總是如此。比方說，如果在 DOM 樹中導(dǎo)航并處理一般的節(jié)點(diǎn)類型，可能就不知道您遇到了元素還是文本。也許獲得了p元素的所有孩子，但是不能確定處理的是文本、b元素還是img元素。這種情況下，在進(jìn)一步的處理之前需要確定是什么類型的節(jié)點(diǎn)。

所幸的是很容易就能做到。DOM 節(jié)點(diǎn)類型定義了一些常量，比如：

Node.ELEMENT_NODE是表示元素節(jié)點(diǎn)類型的常量。
Node.ATTRIBUTE_NODE是表示屬性節(jié)點(diǎn)類型的常量。
Node.TEXT_NODE是表示文本節(jié)點(diǎn)類型的常量。
Node.DOCUMENT_NODE是表示文檔節(jié)點(diǎn)類型的常量。

還有其他一些節(jié)點(diǎn)類型，但是對(duì)于 HTML 除了這四種以外很少用到。我有意沒有給出這些常量的值，雖然 DOM 規(guī)范中定義了這些值，永遠(yuǎn)不要直接使用那些值，因?yàn)檫@正是常量的目的！

nodeType 屬性

可使用nodeType屬性比較節(jié)點(diǎn)和上述常量 —— 該屬性定義在 DOM node 類型上因此可用于所有節(jié)點(diǎn)，如下所示：

var someNode = document.documentElement.firstChild;

if (someNode.nodeType == Node.ELEMENT_NODE) {

alert("We've found an element node named " + someNode.nodeName);

} else if (someNode.nodeType == Node.TEXT_NODE) {

alert("It's a text node; the text is " + someNode.nodeValue);

} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {

alert("It's an attribute named " + someNode.nodeName

+ " with a value of '" + someNode.nodeValue + "'");

}

這個(gè)例子非常簡(jiǎn)單，但說明了一個(gè)大問題：得到節(jié)點(diǎn)的類型非常簡(jiǎn)單。更有挑戰(zhàn)性的是知道節(jié)點(diǎn)的類型之后確定能做什么，只要掌握了節(jié)點(diǎn)、文本、屬性和元素類型提供了什么屬性和方法，就可以自己進(jìn)行 DOM 編程了。

實(shí)踐中的挫折

nodeType屬性似乎是使用節(jié)點(diǎn)的一個(gè)入場(chǎng)卷 —— 允許確定要處理的節(jié)點(diǎn)類型然后編寫處理該節(jié)點(diǎn)的代碼。問題在于上述Node常量定義不能正確地用于 Internet Explorer。因此如果在代碼中使用Node.ELEMENT_NODE、Node.TEXT_NODE或其他任何常量，Internet Explorer 都將返回如圖 4 所示的錯(cuò)誤。

圖 4. Internet Explorer 報(bào)告錯(cuò)誤

任何時(shí)候在 JavaScript 中使用Node常量，Internet Explorer 都會(huì)報(bào)錯(cuò)。因?yàn)槎鄶?shù)人仍然在使用 Internet Explorer，應(yīng)該避免在代碼中使用Node.ELEMENT_NODE或Node.TEXT_NODE這樣的構(gòu)造。盡管據(jù)說即將發(fā)布的新版本 Internet Explorer 7.0 將解決這個(gè)問題，但是在 Internet Explorer 6.x 退出舞臺(tái)之前仍然要很多年。因此應(yīng)避免使用Node，要想讓您的 DOM 代碼（和 Ajax 應(yīng)用程序）能用于所有主要瀏覽器，這一點(diǎn)很重要。

摘自：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/?S_TACT=105AGX52&S_CMP=techcsdn。

posted on 2008-03-11 11:32 Tiger1102 閱讀(1842) 評(píng)論(0) 編輯收藏所屬分類: 每日進(jìn)階

常用鏈接

留言簿(6)

我參與的團(tuán)隊(duì)

隨筆分類

隨筆檔案

文章檔案

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 關(guān)于蔡學(xué)鏞前輩《Java夜未眠》的一些摘要 media="screen" /media="print" 的區(qū)別 option 的經(jīng)典屬性初識(shí)Firebug 全文 — firebug的使用 linux查看進(jìn)程 linux和windows下添加文件路徑的小區(qū)別轉(zhuǎn):MySQL數(shù)據(jù)入庫時(shí)特殊字符處理 Java反射機(jī)制關(guān)于java使用jacob.jar調(diào)用word的配置問題 .htc文件介紹(說明)