《HTML教程》-6.1-6.2教學材料_第1頁
《HTML教程》-6.1-6.2教學材料_第2頁
《HTML教程》-6.1-6.2教學材料_第3頁
《HTML教程》-6.1-6.2教學材料_第4頁
《HTML教程》-6.1-6.2教學材料_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

在許多應用中可以動態(tài)的調(diào)整網(wǎng)頁的內(nèi)容，根據(jù)用戶的不同操作，顯示新的內(nèi)容，刪除原來的內(nèi)容，修改已有的內(nèi)容，而且還有各種動態(tài)效果。這是怎么實現(xiàn)的呢？或許這一問題已經(jīng)勾起了你的興趣，答案就是這一章中。Ajax通過異步請求從服務器請求了信息，并通過添加、修改和刪除網(wǎng)頁中的節(jié)點進行內(nèi)容更新。在網(wǎng)頁中顯示的文本、鏈接、圖片、動畫等漂亮的元素在瀏覽器的解析器看來都是一個一個的節(jié)點，節(jié)點之間有父與子的關系，通過對這些節(jié)點的解析，就顯示出漂亮了網(wǎng)頁了。本章我們就來學習一下這些知識。6.1DOM樹結構DOM指的是文檔對象模型，即DocumentObjectModel。那么DOM到底是什么呢？W3C對DOM的定義如下："TheW3CDocumentObjectModel(DOM)isaplatformandlanguage-neutralinterfacethatallowsprogramsandscriptstodynamicallyaccessandupdatethecontent,structure,andstyleofadocument."[24]這句話的意思是說，W3C文檔對象模型（DOM）是一種獨立于平臺和語言獨立的接口，它允許程序和腳本動態(tài)的訪問并修改文檔的內(nèi)容、結構和風格。那么DOM允許我們做什么呢？或者，換句話說通過DOM我們能做什么呢？通過DOM我們可以實現(xiàn)以下操作[24]。

◆改變網(wǎng)頁中的HTML元素。

◆改變網(wǎng)頁中HTML元素的屬性。

◆改變網(wǎng)頁中CSS的樣式風格。

◆移除已有的HTML元素和屬性?！籼砑有碌腍TML元素和屬性?！魧TML事件予以響應?！魟?chuàng)建新的HTML事件。注意，DOM不但可以進行HTML操作，也可以進行XMLDOM操作，還可以進行其他DOM結構的操作，這里只講述了HTMLDOM的操作，在XML解析章節(jié)再對XMLDOM操作進行講解。了解了DOM可以進行的操作以后，我們來看一下DOM是一種什么樣的結構。我們先來看以下的HTML代碼，如清單6-1所示。清單6-1HTML網(wǎng)頁<html> <head> <title>Mytitle</title> </head><body> <ahref="">Mylink</a> <h1>Myheader</h1> </body></html>清單6-1所示的HTML網(wǎng)頁對應的DOM樹形結構如圖6-1[24]所示。圖6-1DOM樹形結構觀察圖6-1可以發(fā)現(xiàn)<html>下面有兩個節(jié)點，一個是<head>，另一個是<body>，像這種關系的，我們稱<html>為<head>和<body>的父節(jié)點，而<head>和<body>為<html>的子節(jié)點。在網(wǎng)頁中這種父子關系表現(xiàn)為嵌套和被嵌套的關系，即父元素嵌套子元素。同理，<head>是<title>的父節(jié)點，<title>是“Mytitle”的父節(jié)點；<title>為<head>的子節(jié)點，“Mytitle”是<title>的子結點。<body>是<a>和<h1>的父節(jié)點，<a>和<h1>是<body>的子節(jié)點?！癶ref”是<a>的子節(jié)點。其他節(jié)點的父子關系大家根據(jù)以上內(nèi)容判斷一下，看看自己掌握了沒有。DOM中除了父子關系外，還有一個兄弟關系。所謂兄弟，就是有相同父節(jié)點的節(jié)點之間互稱為“兄弟”。如<head>,<body>是兄弟節(jié)點，<a>和<h1>是兄弟節(jié)點，“href”和“Mylink”是兄弟節(jié)點，但是“Mylink”和“Myheader”不是兄弟節(jié)點，可稱為“堂兄弟”。圖6-1中<head>和“Mytitle”是祖孫關系，因為<head>是<title>的父節(jié)點，<title>是“Mytitle”的父節(jié)點，所以“Mytitle”是<head>的孫子節(jié)點。這種孫子節(jié)點有時也稱為“子節(jié)點”，為了與直接“父子”關系相區(qū)別，把直接“父子”關系的子節(jié)點稱為“直接子節(jié)點”，父節(jié)點稱為“直接父節(jié)點”。在不引起混淆的情況下，可以直接稱為“父節(jié)點”“子節(jié)點”。但注意我們在DOM中進行的子節(jié)點操作，不包括這種“間接的子節(jié)點”！請大家仔細對照清單6-1和圖6-1，把網(wǎng)頁中的元素的關系和DOM中節(jié)點之間的關系，這非常重要！這是Ajax操作網(wǎng)頁的基礎，必須徹底掌握。6.2DOM節(jié)點DOM中的每個節(jié)點以Node對象進行表示，每個節(jié)點有一個nodeType屬性，用來標識節(jié)點的類型，并且提供了節(jié)點操作的屬性和方法。下面我們分別介紹節(jié)點類型、節(jié)點屬性和節(jié)點操作。6.2.1節(jié)點類型與結構

DOM中節(jié)點分為7種類型，分別是元素、屬性、文本、注釋、文檔、文檔類型和文檔片段節(jié)點，如表6-1所示。其中用的比較多的是元素節(jié)點、屬性節(jié)點和文本節(jié)點。其他類型的節(jié)點了解一下，知道有這么回事就可以了。表6-1HTMLDOM節(jié)點類型類型nodeTypenodeNamenodeValue描述元素Element1標記名稱Null表示HTML或XML的標記。屬性Attribute2屬性名屬性值元素屬性的名-值對文本Text3#text文本內(nèi)容標記包含的文本注釋Comment8#comment注釋文本HTML注釋文檔Document9#documentNull文檔根對象文檔類型DocumentType10DOCTYPENullDTD聲明文檔片段Fragement11#document-fragmentNull文檔外的一個或多個節(jié)點如果要判斷一個節(jié)點的類型，可以使用節(jié)點的nodeType屬性值來判斷，如nodeType==1就是元素節(jié)點，它可以有自己的屬性節(jié)點。如果nodeType==2就是屬性節(jié)點，可以修改屬性的值，如此等等。還可以通過nodeName的值判斷文本節(jié)點，即如果nodeName==‘#text’即為文本節(jié)點。為了操作節(jié)點方便，下面介紹一下節(jié)點的結構與文檔結構的對應關系。以<a>標記為例進行說明，將節(jié)點結構映射到文檔結構，這樣操作才能比較直觀。<a>標記的節(jié)點結構如圖6-2所示。圖6-2a標記的節(jié)點結構其中，href屬性和a中的文本（Ajax實用技術）都是a的子節(jié)點，也都有自己的結構。屬性節(jié)點為Attr類型的對象，文本節(jié)點為Text類型的對象。對于Attr對象和Text對象這里不再展開描述。6.2.2節(jié)點的屬性

節(jié)點的屬性包含了節(jié)點的某些特征，用于操作節(jié)點本身。通過節(jié)點屬性可以訪問節(jié)點的名字、節(jié)點的值、節(jié)點類型、兄弟節(jié)點等等。通過節(jié)點提供的屬性可以對節(jié)點進行全方位的了解和操作，表6-2列出了W3CDOM節(jié)點的常用屬性。注：nodeValue指的是節(jié)點的值，而不是元素節(jié)點中的文本內(nèi)容，這些文本內(nèi)容是一個文本節(jié)點，以textContent屬性表示，而不是這個nodeValue的值。表6-2中的列出的常用屬性可以分為四類：

◆節(jié)點本身的屬性——nodeName、nodeValue和nodeType，分別獲得節(jié)點名稱、節(jié)點的值（注意不是標記中文本的值，這由獨立的文本節(jié)點進行表示。）

◆節(jié)點遍歷的屬性——parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling，這些屬性可以使得程序員在DOM節(jié)點中進行遍歷，訪問每個要訪問的節(jié)點。

◆節(jié)點的屬性——attributes用于訪問節(jié)點中所有的屬性。

◆其他屬性——ownerDocument返回節(jié)點所在的文檔；namespaceURI、prefix用于節(jié)點關于命名空間的操作。localName返回節(jié)點的名稱。6.2.3節(jié)點的方法節(jié)點的方法用于添加、刪除和修改節(jié)點，是實現(xiàn)Ajax動態(tài)操作頁面的基礎。W3C

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論