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

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

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

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

5、bjTable=document.getElementById(myTable);var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML;alert(strHtml); 歐陽蘭 該代碼指哪個節點 ？thead和tbody標簽用于表格數據的邏輯分組，W3C不推薦，但寫腳本訪問表格數據時常用它們。創建和增加節點 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); 創建和增加節點 的方法createElement（）：創建節點 appendChild（）：末尾追加方式插入節點insertBefore（）：在指定節點前插入新

7、節點cloneNode（）：克隆節點演示示例：創建節點ID屬性：sixty1先創建個節點，然后設置屬性，最后插入節點克隆圖片節點，然后追加插入到文檔刪除和替換節點 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); 刪除和替換節點的方法removeChild（）：刪除節點 replaceChild( ) ：替換節點演示示例：刪除節點ID屬性：sixty1先創建一個節點，然后替換原節點練習操作表格 需求說明實現如下的表格操作功能完成時間：25分鐘 修改標題行樣式為：居中顯示、字體加粗單元格背景顏色變為“#ccc”共性問題集中講解常見調試問題及解決辦法代碼規范問題共性問題集中講解HTML DOM的特有對象和操作2-1 什么是HTML DOM對象 HTML

9、文檔中的每個節點都是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如何實現？表格相關對象4-1表格相關對象table表格對象 tableRow表格行對象 tableCeil單元格對象 表格相關對象4-2table表格對象類別名稱描述屬性rows返回包含表格中所有行的一個數組方法insertRow()在表格中插入一個新行deleteRow()從表格中刪除一行代碼片段tableObject.rows tableObject.insertRow(inde

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

12、例 類別名稱描述屬性cellIndex返回單元格在某行單元格集合中的位置innerHTML設置或返回單元格的開始標簽和結束標簽之間的HTMLalign設置或返回單元格內部數據的水平排列方式className設置或返回元素的class屬性用table對象重新實現表格操作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; 實現“增加一行”的操作 增加一個行對象，然后插入單元格，最后設置單元格 內容演示示例：使用HTML DOM操作表格用table對象重新實現表格操作function delRow() document.getElementById(myTable).deleteRow(1); function updateRow() var uRow=document.getElementById(myTable).rows0; uRow.className=title;實現“刪除第2行”的操作 實現“修改標題”的操作使用class樣式屬性直接修改

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

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