《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第12章_第1頁
《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第12章_第2頁
《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第12章_第3頁
《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第12章_第4頁
《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第12章_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

項(xiàng)目12節(jié)點(diǎn)操作任務(wù)1先導(dǎo)知識(shí)：節(jié)點(diǎn)、節(jié)點(diǎn)的處理任務(wù)2表格的節(jié)點(diǎn)操作

任務(wù)1先導(dǎo)知識(shí)：節(jié)點(diǎn)、節(jié)點(diǎn)的處理

12.1.1節(jié)點(diǎn)的定義根據(jù)W3C的HTMLDOM標(biāo)準(zhǔn)，HTML文檔中的所有內(nèi)容都是節(jié)點(diǎn)。(1)整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)。(2)每個(gè)HTML元素是元素節(jié)點(diǎn)。(3)HTML元素內(nèi)的文本是文本節(jié)點(diǎn)。(4)每個(gè)HTML屬性是屬性節(jié)點(diǎn)。(5)注釋是注釋節(jié)點(diǎn)。

12.1.2節(jié)點(diǎn)的層級(jí)關(guān)系

節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系，父(parent)、子(child)和同胞(sibling)等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)，同級(jí)的子節(jié)點(diǎn)被稱為同胞(兄弟或姐妹)。

(1)在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根(root)。

(2)每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)，除了根(它沒有父節(jié)點(diǎn))。

(3)一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子節(jié)點(diǎn)。

(4)同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)。

圖12.1展示了節(jié)點(diǎn)樹的一部分以及節(jié)點(diǎn)與節(jié)點(diǎn)之間的關(guān)系。

圖12.1節(jié)點(diǎn)的層級(jí)關(guān)系從代碼中可以看出：

·<html>節(jié)點(diǎn)沒有父節(jié)點(diǎn)，它是根節(jié)點(diǎn)。

·<head>和<body>的父節(jié)點(diǎn)是<html>節(jié)點(diǎn)。

·文本節(jié)點(diǎn)"Helloworld!"的父節(jié)點(diǎn)是<p>節(jié)點(diǎn)。

·<html>節(jié)點(diǎn)擁有兩個(gè)子節(jié)點(diǎn)：<head>和<body>。

·<head>節(jié)點(diǎn)擁有一個(gè)子節(jié)點(diǎn)：<title>節(jié)點(diǎn)。

·<title>節(jié)點(diǎn)也擁有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn)"DOM"。

·<h1>和<p>節(jié)點(diǎn)是同胞節(jié)點(diǎn)，同時(shí)也是<body>的子節(jié)點(diǎn)。

·<head>元素是<html>元素的首個(gè)子節(jié)點(diǎn)。

·<body>元素是<html>元素的最后一個(gè)子節(jié)點(diǎn)。

·<h1>元素是<body>元素的首個(gè)子節(jié)點(diǎn)。

·<p>元素是<body>元素的最后一個(gè)子節(jié)點(diǎn)。

JavaScript通過內(nèi)建的document對象訪問和操作HTMLDOM。

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

HTML文檔中的節(jié)點(diǎn)主要有以下重要屬性，如表12.1所示。

程序代碼演示了在節(jié)點(diǎn)樹中按照節(jié)點(diǎn)之間的關(guān)系檢索出各個(gè)節(jié)點(diǎn)、使用節(jié)點(diǎn)的各屬性：

代碼運(yùn)行結(jié)果如圖12.2所示。

圖12.2節(jié)點(diǎn)及屬性

12.1.4元素的查找

JavaScript內(nèi)建的document對象以及節(jié)點(diǎn)對象均提供了三個(gè)在HTMLDOM中查找到指定節(jié)點(diǎn)對象的方法。

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

(2)?getElementsByTagName()方法：該方法返回該對象下所有指定標(biāo)簽名稱的節(jié)點(diǎn)對象數(shù)組。

(3)?getElementsByClassName()方法：該方法返回該對象下所有指定類名的節(jié)點(diǎn)對象數(shù)組。

1.?getElementById()方法

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

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

2.?getElementsByTagName()方法

getElementsByTagName()方法通過指定HTML標(biāo)簽名稱來查找到所有該標(biāo)簽的節(jié)點(diǎn)對象，

通過對JavaScript內(nèi)建的document對象調(diào)用getElementsByTagName()方法，查找到文檔中所有的h1元素節(jié)點(diǎn)對象組成的數(shù)組，并將該數(shù)組賦值給變量h1。

3.?getElementsByClassName()方法

HTML允許為每個(gè)元素指定class屬性，class屬性的值在同一HTML文檔中允許重復(fù)。通過指定class屬性的值來查找到HTMLDOM中所有class屬性為該值的節(jié)點(diǎn)對象組成的數(shù)組，

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

12.1.5節(jié)點(diǎn)操作方法

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

1.創(chuàng)建節(jié)點(diǎn)、追加節(jié)點(diǎn)

(1)?createElement(標(biāo)簽名)創(chuàng)建一個(gè)元素節(jié)點(diǎn)(具體的一個(gè)元素)。

(2)?appendChild(節(jié)點(diǎn))追加一個(gè)節(jié)點(diǎn)。

(3)?createTextNode(節(jié)點(diǎn)文本內(nèi)容)創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2.插入節(jié)點(diǎn)

(1)?appendChild(節(jié)點(diǎn))是一種插入節(jié)點(diǎn)的方式，還可以添加已經(jīng)存在的元素，會(huì)將其元素從原來的位置移到新的位置。

(2)?insertBefore(a,b)是參照節(jié)點(diǎn)，意思是a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面。

3.刪除、移除節(jié)點(diǎn)

removeChild(節(jié)點(diǎn))

刪除一個(gè)節(jié)點(diǎn)，用于移除刪除一個(gè)參數(shù)(節(jié)點(diǎn))。其返回的被移除的節(jié)點(diǎn)，被移除的節(jié)點(diǎn)仍在文檔中，只是文檔中已沒有其位置了。

4.替換節(jié)點(diǎn)

replaceChild(插入的節(jié)點(diǎn)，被替換的節(jié)點(diǎn))用于替換節(jié)點(diǎn)，接受兩個(gè)參數(shù)，第一參數(shù)是要插入的節(jié)點(diǎn)，第二個(gè)是要被替換的節(jié)點(diǎn)。返回的是被替換的節(jié)點(diǎn)。

5.查找節(jié)點(diǎn)

(1)?childNodes

包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)的子節(jié)點(diǎn)。

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

(3)?parentNode：獲取父節(jié)點(diǎn)。

任務(wù)2表格的節(jié)點(diǎn)操作

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

2.程序編寫

圖12.3表格行的添加和刪除

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

1.程序要求

在文本框內(nèi)輸入內(nèi)容并點(diǎn)擊“保存”按鈕后，表格生成新的一行，如點(diǎn)擊“刪除”按鈕時(shí)，刪除相應(yīng)的行，效果如圖12.4所示。

溫馨提示

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

評(píng)論

0/150

提交評(píng)論