《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第9章 JavaScript事件與DOM操作_第1頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第9章 JavaScript事件與DOM操作_第2頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第9章 JavaScript事件與DOM操作_第3頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第9章 JavaScript事件與DOM操作_第4頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第9章 JavaScript事件與DOM操作_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第9章JavaScript事件與DOM操作學(xué)習(xí)目標123了解JavaScript事件的概念掌握JavaScript事件的應(yīng)用了解DOM、DOMHTML節(jié)點樹的概念4掌握JavaScript對DOM進行操作的方法本章架構(gòu)★★★9.1應(yīng)用JavaScript事件9.2應(yīng)用JavaScript操作DOM9.3綜合案例9.1應(yīng)用JavaScript事件9.1應(yīng)用JavaScript事件事件是一些可以通過腳本響應(yīng)的頁面事件。就是當(dāng)用戶按下鼠標鍵?；蛘咛峤灰粋€表單，事件就會處理。網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。比方說，我們可以在用戶點擊某按鈕時產(chǎn)生一個onClick事件來觸發(fā)某個函數(shù)。1事件概述9.1應(yīng)用JavaScript事件事件調(diào)用分為HTML調(diào)用和JavaScript調(diào)用。HTML調(diào)用：在HTML標簽中添加相應(yīng)的事件,并指定要執(zhí)行的代碼或函數(shù)名。JavaScript調(diào)用：在JavaScript中調(diào)用事件處理程序,首先需要獲得要處理對象的引用，然后將要執(zhí)行的處理函數(shù)賦值給對應(yīng)的事件。在JavaScript代碼中（即script標簽內(nèi)）綁定事件可以使JavaScript代碼與HTML標簽分離，文檔結(jié)構(gòu)清晰，便于管理和開發(fā)。1事件概述9.1應(yīng)用JavaScript事件例9-1chapter09_01.html2事件的應(yīng)用9.1應(yīng)用JavaScript事件例9-2chapter09_02.html2事件的應(yīng)用9.1應(yīng)用JavaScript事件例9-3chapter09_03.html2事件的應(yīng)用9.1應(yīng)用JavaScript事件例9-4chapter09_04.html2事件的應(yīng)用9.2應(yīng)用JavaScript操作DOM9.2應(yīng)用JavaScript操作DOMDOM(documentobjectmodel)：文檔對象模型。DOMHTML節(jié)點樹：是為操作HTML文檔提供的屬性和方法，其中文檔表示HTML文件，文檔中的標簽稱之為元素，將文檔中的所有內(nèi)容稱之為節(jié)點。因此，一個HTML文件可以看到所有元素組成的一個節(jié)點樹。根據(jù)W3C的HTMLDOM標準，HTML文檔中的所有內(nèi)容都是節(jié)：整個文檔是一個文檔節(jié)點。每個HTML元素是元素節(jié)點。HTML元素內(nèi)的文本是文本節(jié)點。每個HTML屬性是屬性節(jié)點。每個注釋是注釋節(jié)點。1文檔對象模型的概念9.2應(yīng)用JavaScript操作DOMDOM節(jié)點對象主要包括：根節(jié)點：<html>標簽是整個文檔的根節(jié)點，有且只有一個。子節(jié)點：指的是一個節(jié)點的下級節(jié)點，例如<head>和<body>節(jié)點是<html>節(jié)點的子節(jié)點。父節(jié)點：指的是某一個節(jié)點的上級節(jié)點，例如，<html>元素則是<head>和<body>的父節(jié)點。兄弟節(jié)點：兩個節(jié)點屬于一個父節(jié)點，例如<head>和<body>互為兄弟節(jié)點。1文檔對象模型的概念9.2應(yīng)用JavaScript操作DOM通過HTMLDOM，節(jié)點樹中的所有節(jié)點都可以通過JS進行訪問。所有HTML元素（節(jié)點）均可被修改。DOM操作的四種基本方法：getElementById()getElementsByTagname()getAttribute()setAttribute()1文檔對象模型的概念9.2應(yīng)用JavaScript操作DOMHTMLDOM節(jié)點的屬性主要包括：parentNode：返回節(jié)點的父節(jié)點childNodes：返回子節(jié)點集合，childNodes[i]firstChild：返回節(jié)點的第一個子節(jié)點，最普遍的用法是訪問該元素的文本節(jié)點lastChild：返回節(jié)點的最后一個子節(jié)點nextSibling：下一個節(jié)點previousSibling：上一個節(jié)點1文檔對象模型的概念9.2應(yīng)用JavaScript操作DOMJavaScriptDOM的應(yīng)用例9-5

chapter09_05.html2JavaScriptDOM操作9.3綜合案例8.3綜合案例下面通過綜合案例，來進一步深入理解和掌握本章涉及的知識點與技術(shù)點。本案例使用表單元素設(shè)計制作一個信息提交頁面，當(dāng)用戶單擊“提交”時，驗證表單元素中的信息不能為空，不能提交，如果信息完整，允許正常提交。本章總結(jié)本章重點介紹了JavaScript事件、DOM、

溫馨提示

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

評論

0/150

提交評論