2023學年完整公開課版初識DOM與事件

《物聯(lián)網(wǎng)Web前端開發(fā)基礎》課程

初識DOM與事件【任務6-4】初識DOM與事件知識儲備—DOM對象什么是DOM？知識儲備—DOM對象DOM(DocumentObjectModel)稱為文檔對象模型，是一個表示和處理文檔的應用程序接口（API），可用于動態(tài)訪問、更新文檔的內(nèi)容、結構和樣式。DOM將網(wǎng)頁中文檔的對象關系規(guī)劃為節(jié)點層級，構成它們之間的等級關系，這種各對象間的層次結構被稱為節(jié)點樹?！救蝿?-4】初識DOM與事件知識儲備—DOM對象DOM節(jié)點樹的特點1234每個節(jié)點樹有一個根節(jié)點。除了根節(jié)點，每個節(jié)點都有一個父節(jié)點。每個節(jié)點都可以有許多的子節(jié)點。具有相同父節(jié)點的節(jié)點叫做“兄弟節(jié)點”?！救蝿?-4】初識DOM與事件知識儲備—DOM對象（1）獲取指定DOM元素JavaScript通過使用節(jié)點的屬性和方法可以訪問指定元素和相關元素，從而得到文檔中的各個元素對象。類型方法說明訪問指定節(jié)點getElementById()獲取擁有指定ID的第一個元素對象的引用getElementsByName()獲取帶有指定名稱的元素對象集合getElementsByTagName()獲取帶有指定標簽名的元素對象集合getElementsByClassName()獲取指定class的元素對象集合（不支持IE6~8瀏覽器）【任務6-4】初識DOM與事件知識儲備—DOM對象類型屬性/方法說明元素內(nèi)容innerHTML獲取或設置元素的HTML內(nèi)容樣式屬性className獲取或設置元素的class屬性style獲取或設置元素的style樣式屬性位置屬性offsetWidth、offsetHeight獲取或設置元素的寬和高（不含滾動條）scrollWidth、scrollHeight獲取或設置元素的完整的寬和高（含滾動條）offsetTop、offsetLeft獲取或設置包含滾動條，距離上或左邊滾動過的距離scrollTop、scrollLeft獲取或設置元素在網(wǎng)頁中的坐標屬性操作getAttribute()獲得元素指定屬性的值setAttribute()為元素設置新的屬性removeAttribute()為元素刪除指定的屬性（2）DOM元素屬性與內(nèi)容的操作【任務6-4】初識DOM與事件知識儲備—DOM對象（3）DOM元素樣式的操作在操作元素屬性時，style屬性可以修改元素的樣式，className屬性可以修改元素的類名，通過這兩種方法即可完成元素的樣式操作。a)style屬性每個元素對象都有一個style屬性，使用這個屬性可以動態(tài)調整元素的內(nèi)嵌樣式，從而獲得所需要的效果。例如：test.style.width="200px";//設置樣式，相當于：#test{width:200px;}【任務6-4】初識DOM與事件知識儲備—DOM對象b)className屬性元素對象的className屬性用于切換元素的類名，或為元素追加類名。例如：test.className="aa";//添加樣式，執(zhí)行后：<divid="test"class="aa">【任務6-4】初識DOM與事件知識儲備—事件和事件處理什么是事件？【任務6-4】初識DOM與事件知識儲備—事件和事件處理所謂的事件是指用戶在訪問頁面時執(zhí)行的操作。當瀏覽器探測到一個事件時，比如，單擊鼠標或按鍵，它可以觸發(fā)與這個事件相關聯(lián)的JavaScript對象?！救蝿?-4】初識DOM與事件知識儲備—事件和事件處理事件處理的過程發(fā)生事件啟動事件處理程序事件處理程序作出反應【任務6-4】初識DOM與事件知識儲備—事件處理程序的調用1在JavaScript中調用事件處理