Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)13 制作留言頁(yè)面_第1頁(yè)
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)13 制作留言頁(yè)面_第2頁(yè)
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)13 制作留言頁(yè)面_第3頁(yè)
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)13 制作留言頁(yè)面_第4頁(yè)
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)13 制作留言頁(yè)面_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web前端技術(shù)主講人：XXX

XXX學(xué)院任務(wù)13制作留言頁(yè)面【知識(shí)目標(biāo)】

理解什么是節(jié)點(diǎn)；

熟悉常見(jiàn)節(jié)點(diǎn)的類型；

了解節(jié)點(diǎn)的層級(jí)；

掌握獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法；

掌握如何創(chuàng)建節(jié)點(diǎn)、添加節(jié)點(diǎn)、刪除節(jié)點(diǎn)和復(fù)制節(jié)點(diǎn)。【技能目標(biāo)】

能夠根據(jù)需求正確獲取節(jié)點(diǎn)；

能夠根據(jù)需求創(chuàng)建節(jié)點(diǎn)；

能夠根據(jù)需求添加節(jié)點(diǎn)；

能夠根據(jù)需求刪除節(jié)點(diǎn)；

能夠根據(jù)需求復(fù)制節(jié)點(diǎn)。【素質(zhì)目標(biāo)】

培養(yǎng)學(xué)生換位思考的能力；培養(yǎng)學(xué)生分析問(wèn)題、解決問(wèn)題能力。教學(xué)目標(biāo)知識(shí)導(dǎo)圖節(jié)點(diǎn)概述（1）什么是節(jié)點(diǎn)JavaScript節(jié)點(diǎn)是指頁(yè)面中所有的內(nèi)容，包括標(biāo)簽、屬性、文本、注釋等。在HTMLDOM樹(shù)中，所有的節(jié)點(diǎn)均可以通過(guò)JavaScript進(jìn)行訪問(wèn)，因此，可以利用節(jié)點(diǎn)操作的方式操作HTML中的元素。JavaScript把元素、屬性以及文本當(dāng)作不同的節(jié)點(diǎn)來(lái)處理，表示元素的叫作“元素節(jié)點(diǎn)”，表示屬性的叫作“屬性節(jié)點(diǎn)”，而表示文本的叫作“文本節(jié)點(diǎn)”。

每個(gè)節(jié)點(diǎn)至少擁有節(jié)點(diǎn)類型（nodeType）、節(jié)點(diǎn)名稱（nodeName）、節(jié)點(diǎn)值（nodeValue）這3個(gè)基本屬性。DOM節(jié)點(diǎn)共有12種類型，其中常見(jiàn)類型的如下表所示。注意：在實(shí)際的開(kāi)發(fā)中，主要操作的是元素節(jié)點(diǎn)，因此，可以根據(jù)nodeType的值來(lái)判斷是否為元素節(jié)點(diǎn)。（2）節(jié)點(diǎn)的層級(jí)DOM可以將任何HTML文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁(yè)面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹(shù)形結(jié)構(gòu)。節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。父（parent）、子（child）和同胞（sibling）等術(shù)語(yǔ)用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。在節(jié)點(diǎn)的應(yīng)用中，需注意以下幾點(diǎn)：（1）在節(jié)點(diǎn)樹(shù)中，頂端節(jié)點(diǎn)被稱為根（root）節(jié)點(diǎn)，如<html>標(biāo)簽是整個(gè)文檔的根節(jié)點(diǎn)，有且僅有一個(gè)；（2）每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒(méi)有父節(jié)點(diǎn)）。（3）一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子節(jié)點(diǎn)。（4）同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)。獲取父節(jié)點(diǎn)獲取父節(jié)點(diǎn)在JavaScript中，我們經(jīng)常需要操作DOM元素的父節(jié)點(diǎn)，獲取父節(jié)點(diǎn)的方法是使用parentNode屬性。<divclass="father"><divclass="child">helloJavaScript!</div></div><script>//獲取類名為child的div元素

letchild=document.querySelector('.child’);//獲取child元素的父節(jié)點(diǎn)（father）letfather=child.parentNode;//在控制臺(tái)輸出fatherconsole.log(father);</script>獲取子節(jié)點(diǎn)（childNodes屬性）childNodes屬性childNodes屬性會(huì)返回當(dāng)前元素的所有子節(jié)點(diǎn)的集合，即包括文本節(jié)點(diǎn)、元素節(jié)點(diǎn)以及其他類型的節(jié)點(diǎn)，如果只想獲取元素節(jié)點(diǎn)，需要做專門的處理，示例代碼如下。<ul><li>第1個(gè)列表項(xiàng)</li><li>第2個(gè)列表項(xiàng)</li><li>第3個(gè)列表項(xiàng)</li><li>第4個(gè)列表項(xiàng)</li></ul><script>letul=document.querySelector('ul‘);letlis=ul.childNodes;console.log(lis);for(leti=0;i<lis.length;i++){if(lis[i].nodeType===1){console.log(lis[i])}}</script>獲取子節(jié)點(diǎn)（children屬性）childNodes屬性children屬性是一個(gè)可讀屬性，返回所有子元素結(jié)點(diǎn)集合。在實(shí)際的開(kāi)發(fā)中，推薦使用children屬性來(lái)獲取子元素。<divclass="box"><p>第1段</p><p>第2段</p><p>第3段</p><p>第4段</p></div><script>letbox=document.querySelector('.box‘);letps=box.children;console.log(ps);</script>操作節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)在DOM中，可以使用document對(duì)象的createElement方法創(chuàng)建節(jié)點(diǎn)，其語(yǔ)法格式如下。document.createElement('TagName’)<script>letp=document.createElement('p’);console.log(p);//輸出的結(jié)果為：<p></p></script>在JavaScript中，除了使用document.createElement()方法能創(chuàng)建節(jié)點(diǎn)外，還有以下兩種方法也能創(chuàng)建節(jié)點(diǎn)。（1）document.write()使用document.write()方法能夠創(chuàng)建元素，但使用的時(shí)候需要注意，如果頁(yè)面文檔流加載完畢，再調(diào)用會(huì)導(dǎo)致頁(yè)面重繪。（2）element.innerHTMLelement.innerHTML能夠?qū)TML內(nèi)容寫(xiě)入某個(gè)DOM節(jié)點(diǎn)，該種方法不會(huì)導(dǎo)致頁(yè)面重繪。添加節(jié)點(diǎn)方法方法說(shuō)明appendChild(子節(jié)點(diǎn))將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾insertBefore(添加的子節(jié)點(diǎn),指定的子節(jié)點(diǎn))將節(jié)點(diǎn)添加到父節(jié)點(diǎn)的子節(jié)點(diǎn)列表開(kāi)頭添加節(jié)點(diǎn)案例<h3>圖書(shū)列表</h3><ulclass="booklist"><li>Photoshop圖像處理與制作</li></ul><script>//獲取元素letbooklist=document.querySelector('.booklist’);//創(chuàng)建第個(gè)節(jié)點(diǎn)li1和li2letli1=document.createElement('li’);letli2=document.createElement('li’);//往節(jié)點(diǎn)里寫(xiě)入內(nèi)容li1.innerText='工作手冊(cè)式CMS建站實(shí)踐’;li2.innerText='項(xiàng)目驅(qū)動(dòng)式信息系統(tǒng)開(kāi)發(fā)實(shí)訓(xùn)教程’;//把節(jié)點(diǎn)添加到booklist中

booklist.appendChild(li1);//添加到列表末尾//添加到列表開(kāi)頭

booklist.insertBefore(li2,booklist.children[0]);</script>刪除節(jié)點(diǎn)方法在DOM中，可以使用removeChild()方法刪除一個(gè)子節(jié)點(diǎn)，并返回刪除的節(jié)點(diǎn),示例代碼如下。<h3>圖書(shū)列表</h3><ulclass="booklist"><li>PHP程序設(shè)計(jì)基礎(chǔ)</li><li>Photoshop圖像處理與制作</li><li>工作手冊(cè)式CMS建站實(shí)踐</li></ul><script>//獲取元素letbooklist=document.querySelector('.booklist');//刪除booklist的第2個(gè)子節(jié)點(diǎn)booklist.removeChild(booklist.children[1])</script>復(fù)制節(jié)點(diǎn)復(fù)制節(jié)點(diǎn)，也稱為克隆節(jié)點(diǎn)或拷貝節(jié)點(diǎn)，在DOM中，主要是通過(guò)cloneNode()方法來(lái)實(shí)現(xiàn)的。復(fù)制節(jié)點(diǎn)的語(yǔ)法格式如下。

需要被克隆的節(jié)點(diǎn).cloneNode(true/false)在復(fù)制節(jié)點(diǎn)時(shí)，需要注意以下兩點(diǎn)：（1）如果小括號(hào)里的參數(shù)為空或false，則是淺拷貝，即只復(fù)制節(jié)點(diǎn)本身；（2）如果小括號(hào)里的參數(shù)為true，則是深拷貝，即會(huì)復(fù)制節(jié)點(diǎn)本身及里面所有的子節(jié)點(diǎn)。復(fù)制節(jié)點(diǎn)案例<inputtype="button"value="復(fù)制節(jié)點(diǎn)"><hr><h3>我喜歡的水果：</h3><ulid="myfruit"><li>草莓</li><li>橙子</li><li>蘋果</li></ul><h3>復(fù)制過(guò)來(lái)的節(jié)點(diǎn)：</h3><ulid="copy"></ul><script>letbtn=document.querySelector('input’)btn.onclic

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論