《基于新信息技術的JavaScript程序設計基礎》課件-第12章_第1頁
《基于新信息技術的JavaScript程序設計基礎》課件-第12章_第2頁
《基于新信息技術的JavaScript程序設計基礎》課件-第12章_第3頁
《基于新信息技術的JavaScript程序設計基礎》課件-第12章_第4頁
《基于新信息技術的JavaScript程序設計基礎》課件-第12章_第5頁
已閱讀5頁，還剩19頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

項目12節點操作任務1先導知識：節點、節點的處理任務2表格的節點操作

任務1先導知識：節點、節點的處理

12.1.1節點的定義根據W3C的HTMLDOM標準，HTML文檔中的所有內容都是節點。(1)整個文檔是一個文檔節點。(2)每個HTML元素是元素節點。(3)HTML元素內的文本是文本節點。(4)每個HTML屬性是屬性節點。(5)注釋是注釋節點。

12.1.2節點的層級關系

節點樹中的節點彼此擁有層級關系，父(parent)、子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點，同級的子節點被稱為同胞(兄弟或姐妹)。

(1)在節點樹中，頂端節點被稱為根(root)。

(2)每個節點都有父節點，除了根(它沒有父節點)。

(3)一個節點可擁有任意數量的子節點。

(4)同胞是擁有相同父節點的節點。

圖12.1展示了節點樹的一部分以及節點與節點之間的關系。

圖12.1節點的層級關系從代碼中可以看出：

·<html>節點沒有父節點，它是根節點。

·<head>和<body>的父節點是<html>節點。

·文本節點"Helloworld!"的父節點是<p>節點。

·<html>節點擁有兩個子節點：<head>和<body>。

·<head>節點擁有一個子節點：<title>節點。

·<title>節點也擁有一個子節點：文本節點"DOM"。

·<h1>和<p>節點是同胞節點，同時也是<body>的子節點。

·<head>元素是<html>元素的首個子節點。

·<body>元素是<html>元素的最后一個子節點。

·<h1>元素是<body>元素的首個子節點。

·<p>元素是<body>元素的最后一個子節點。

JavaScript通過內建的document對象訪問和操作HTMLDOM。

12.1.3節點的屬性

HTML文檔中的節點主要有以下重要屬性，如表12.1所示。

程序代碼演示了在節點樹中按照節點之間的關系檢索出各個節點、使用節點的各屬性：

代碼運行結果如圖12.2所示。

圖12.2節點及屬性

12.1.4元素的查找

JavaScript內建的document對象以及節點對象均提供了三個在HTMLDOM中查找到指定節點對象的方法。

(1)?getElementById()方法：該方法返回該對象下帶有指定ID的節點對象。

(2)?getElementsByTagName()方法：該方法返回該對象下所有指定標簽名稱的節點對象數組。

(3)?getElementsByClassName()方法：該方法返回該對象下所有指定類名的節點對象數組。

1.?getElementById()方法

HTML允許為每個元素指定id屬性，id屬性的值應該在同一HTML文檔中唯一。getElementById()方法通過指定id屬性的值來查找到HTMLDOM中唯一的節點對象。

通過對JavaScript內建的document對象調用getElementById()方法，查找到文檔中id屬性值為intro的節點對象，并將該對象賦值給變量intro。

2.?getElementsByTagName()方法

getElementsByTagName()方法通過指定HTML標簽名稱來查找到所有該標簽的節點對象，

通過對JavaScript內建的document對象調用getElementsByTagName()方法，查找到文檔中所有的h1元素節點對象組成的數組，并將該數組賦值給變量h1。

3.?getElementsByClassName()方法

HTML允許為每個元素指定class屬性，class屬性的值在同一HTML文檔中允許重復。通過指定class屬性的值來查找到HTMLDOM中所有class屬性為該值的節點對象組成的數組，

通過對JavaScript內建的document對象調用getElementsByClassName()方法，查找到文檔中所有的class屬性為odd的元素節點對象組成的數組，并將該數組賦值給變量odd。

12.1.5節點操作方法

由于節點具有易于操縱、對象明確等特點，DOM供了非常豐富的節點處理方法來對各種節點進行操作，包括的節點有對象節點、文本節點和屬性節點，如表12.2所示。

1.創建節點、追加節點

(1)?createElement(標簽名)創建一個元素節點(具體的一個元素)。

(2)?appendChild(節點)追加一個節點。

(3)?createTextNode(節點文本內容)創建一個文本節點

2.插入節點

(1)?appendChild(節點)是一種插入節點的方式，還可以添加已經存在的元素，會將其元素從原來的位置移到新的位置。

(2)?insertBefore(a,b)是參照節點，意思是a節點會插入b節點的前面。

3.刪除、移除節點

removeChild(節點)

刪除一個節點，用于移除刪除一個參數(節點)。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。

4.替換節點

replaceChild(插入的節點，被替換的節點)用于替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。

5.查找節點

(1)?childNodes

包含文本節點和元素節點的子節點。

(2)?children也可以獲取子節點，而且兼容各種瀏覽器。

(3)?parentNode：獲取父節點。

任務2表格的節點操作

12.2.1表格行的添加和刪除(一)1.程序要求點擊“添加”按鈕可以添加行，點擊“刪除”按鈕可以刪除行，點擊“修改”按鈕則返回一個警告框，效果如圖12.3所示。

2.程序編寫

圖12.3表格行的添加和刪除

12.2.2表格行的添加和刪除(二)

1.程序要求

在文本框內輸入內容并點擊“保存”按鈕后，表格生成新的一行，如點擊“刪除”按鈕時，刪除相應的行，效果如圖12.4所示。

溫馨提示

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

評論

0/150

提交評論