2、使用javascript增強交互效果chapter04-dom編程

1、 DOM高級編程第四章回顧與作業(yè)點評document對象提供了哪三種訪問DOM元素的方法？history、location對象分別有哪些常用方法？使用什么樣式屬性控制元素的隱藏/顯示？預習檢查根據(jù)你的理解，什么是DOM？W3C標準定義的DOM由哪三部分組成？標準節(jié)點操作包括哪些操作？本章任務制作動態(tài)添加表格的特效演示示例：練習3-修改訂單本章目標使用getElement系列方法實現(xiàn)DOM元素的查找和定位使用Core DOM標準操作實現(xiàn)節(jié)點的增刪改查使用HTML DOM特有操作實現(xiàn)HTML元素內(nèi)容修改回顧DOM模型的相關概念3-1什么是DOM？文檔對象模型（Document Object Mod

2、el）通過DOM可以動態(tài)改變文檔內(nèi)容動態(tài)改變文檔內(nèi)容的原理1、解析文檔（如HTML）并生成DOM樹2、通過DOM標準接口+編程語言改變文檔內(nèi)容演示示例：演示案例1-改變圖片回顧DOM模型的相關概念3-1解析文檔生成DOM樹的過程DOM節(jié)點 喜歡的水果 DOM應用生成的DOM樹結(jié)構(gòu)是什么？換圖，加屬性節(jié)點回顧DOM模型的相關概念3-1DOM樹中的節(jié)點類型和節(jié)點關系(換圖)文檔節(jié)點document元素節(jié)點文本節(jié)點.屬性節(jié)點父子關系同級關系回顧DOM模型的相關概念3-1W3C規(guī)定的三類DOM標準接口（換圖）Core DOM（核心DOM），適用于各種結(jié)構(gòu)化文檔XML DOM（Java OOP學過），專

3、用于XML文檔HTML DOM，專用于HTML文檔選用DOM標準接口，結(jié)合支持的編程語言訪問DOM樹，如Java、JavaScript、C#等Core DOM的操作查看節(jié)點創(chuàng)建和增加節(jié)點刪除和替換節(jié)點查看節(jié)點訪問指定節(jié)點的方法getElementById( ) getElementsByName( ) getElementsByTagName( ) 查看/修改屬性節(jié)點getAttribute(屬性名) setAttribute(屬性名,屬性值) 演示示例：訪問節(jié)點屬性的值查看節(jié)點3-1訪問指定節(jié)點的方法getElementById( ) ：返回一個節(jié)點對象getElementsByName(

4、)：返回多個（節(jié)點數(shù)組）getElementsByTagName( ) ：返回多個（節(jié)點數(shù)組）查看/修改屬性節(jié)點getAttribute(屬性名) setAttribute(屬性名,屬性值) 演示示例：訪問節(jié)點屬性的值查看節(jié)點3-2根據(jù)層次關系查找節(jié)點 parentNode firstChild lastChild 如果編程時希望訪問某個元素的父元素，但又不知道父元素的ID、name、tag，怎么辦？ 東方賀 語文 95 該節(jié)點的parentNode ？該節(jié)點的firstChild ？lastChild ？查看節(jié)點3-3演示示例：根據(jù)層次關系查找節(jié)點function checks()var o

5、bjTable=document.getElementById(myTable);var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML;alert(strHtml); 歐陽蘭 該代碼指哪個節(jié)點 ？thead和tbody標簽用于表格數(shù)據(jù)的邏輯分組，W3C不推薦，但寫腳本訪問表格數(shù)據(jù)時常用它們。創(chuàng)建和增加節(jié)點 function newNode() var oldNode=document.getElementById(sixty1); var image=document.createElement(img); image

6、.setAttribute(src,images/newimg.jpg); document.body.insertBefore(image,oldNode); function copyNode() var image=document.getElementById(sixty1); var copyImage=image.cloneNode(false); document.body.appendChild(copyImage); 創(chuàng)建和增加節(jié)點 的方法createElement（）：創(chuàng)建節(jié)點 appendChild（）：末尾追加方式插入節(jié)點insertBefore（）：在指定節(jié)點前插入新

7、節(jié)點cloneNode（）：克隆節(jié)點演示示例：創(chuàng)建節(jié)點ID屬性：sixty1先創(chuàng)建個節(jié)點，然后設置屬性，最后插入節(jié)點克隆圖片節(jié)點，然后追加插入到文檔刪除和替換節(jié)點 function delNode() var dNode=document.getElementById(sixty1); document.body.removeChild(dNode); function repNode() var oldimage=document.getElementById(sixty2); var newimage=document.createElement(img); newimage.setAtt

8、ribute(src,images/replace.jpg); document.body.replaceChild(newimage,oldimage); 刪除和替換節(jié)點的方法removeChild（）：刪除節(jié)點 replaceChild( ) ：替換節(jié)點演示示例：刪除節(jié)點ID屬性：sixty1先創(chuàng)建一個節(jié)點，然后替換原節(jié)點練習操作表格 需求說明實現(xiàn)如下的表格操作功能完成時間：25分鐘 修改標題行樣式為：居中顯示、字體加粗單元格背景顏色變?yōu)椤?ccc”共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解HTML DOM的特有對象和操作2-1 什么是HTML DOM對象 HTML

9、文檔中的每個節(jié)點都是DOM對象，每類對象都有1套屬性、方法。最常用的是表格和各類表單元素對象HTML DOM的特有對象和操作2-2 HTML DOM對象 的屬性訪問function change() var imgs=document.getElementById(s1); imgs.src=images/grape.jpg;function show() var hText=document.getElementById(s1).alt; alert(圖片的alt是：+hText)演示示例：使用HTMLDOM對象的屬性訪問不再使用setAttribute（）/ getAttribute（）方

10、法簡化為對象名.屬性值進行讀取或修改HTML DOM對象-table對象思路分析1、使用Core DOM標準操作獲取表格對象2、使用HTML DOM的table相關對象的屬性、方法、事件操作表格使用HTML DOM如何實現(xiàn)？表格相關對象4-1表格相關對象table表格對象 tableRow表格行對象 tableCeil單元格對象 表格相關對象4-2table表格對象類別名稱描述屬性rows返回包含表格中所有行的一個數(shù)組方法insertRow()在表格中插入一個新行deleteRow()從表格中刪除一行代碼片段tableObject.rows tableObject.insertRow(inde

11、x)deleteRow(index)用法示例代碼 代碼片段tableRowObject.insertCell(index) tableRowObject.deleteRow(index)表格相關對象4-3tableRow表格行對象用法示例 類別名稱描述屬性cells返回包含行中所有單元格的一個數(shù)組rowIndex返回該行在表中的位置方法insertCell()在一行中的指定位置插入一個空的標簽deleteCell()刪除行中指定的單元格代碼片段cell2.innerHTML=“改變單元格的HTML內(nèi)容;cell2.align=center;表格相關對象4-4tableCell單元格行對象用法示

12、例 類別名稱描述屬性cellIndex返回單元格在某行單元格集合中的位置innerHTML設置或返回單元格的開始標簽和結(jié)束標簽之間的HTMLalign設置或返回單元格內(nèi)部數(shù)據(jù)的水平排列方式className設置或返回元素的class屬性用table對象重新實現(xiàn)表格操作2-1function addRow()var newRow=document.getElementById(myTable).insertRow(2);var col1=newRow.insertCell(0);col1.innerHTML=幸福從天而降;var col2=newRow.insertCell(1);col2.in

13、nerHTML=18.5;col2.align=center; 實現(xiàn)“增加一行”的操作 增加一個行對象，然后插入單元格，最后設置單元格 內(nèi)容演示示例：使用HTML DOM操作表格用table對象重新實現(xiàn)表格操作function delRow() document.getElementById(myTable).deleteRow(1); function updateRow() var uRow=document.getElementById(myTable).rows0; uRow.className=title;實現(xiàn)“刪除第2行”的操作 實現(xiàn)“修改標題”的操作使用class樣式屬性直接修改

14、標題樣式演示示例：使用HTML DOM操作表格練習-訂單的刪除和增加2-1訓練要點使用insertRow()插入行使用deleteRow()刪除行使用insertCell()插入單元格使用rowIndex判斷當前行在表格中的位置需求說明實現(xiàn)訂單表格的刪除和增加練習-訂單的刪除和增加2-2實現(xiàn)思路和關鍵代碼使用集合rows和屬性length計算當前表格中的行數(shù) 使用tableRow對象插入新行時，設置行id屬性，方便后續(xù)刪除 var addTable=document.getElementById(order); var row_index=addTable.rows.length-1; 索引從

15、0開始，所以總長度-1 newRow.id=row+row_index; 插入ID號，產(chǎn)生效果為：，方便后續(xù)傳遞行號參數(shù)給刪除函數(shù)delRow(rowId)共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解練習-訂單的修改2-1訓練要點使用rowIndex和cells訪問當前單元格使用innerHTML改變數(shù)量顯示在文本框中或單元格內(nèi)使用節(jié)點（firstChild、lastChild）訪問單元格中的按鈕或文本框使用setAttribute改變動態(tài)改變事件調(diào)用的函數(shù)實現(xiàn)表格的修改訂單功能點擊修改按鈕修改訂單，點擊確定按鈕修改生效需求說明可以增加定單單擊“修改”按鈕時，數(shù)量改為文本框顯示，可以改變數(shù)量，并且“修改”按鈕變?yōu)椤按_定”按鈕單擊“確定”按鈕后，修改數(shù)量成功，并且數(shù)量顯示在當前的單元格中，“確定”按鈕變?yōu)椤靶薷摹卑粹o練習-訂單的修改2-2實現(xiàn)思路 “修改”按鈕函數(shù)editRow()、 “確定”按鈕函數(shù)upRow()，兩個函數(shù)傳遞的參數(shù)都是當前行的id號 函數(shù)editRow()：使用lastChild訪問最后一個單元格中的“修改”按鈕，并改變value值為“