11. DOM、事件與樣式
•Télécharger en tant que PPTX, PDF•
0 j'aime•410 vues
認識DOM操作 處理事件 掌握樣式 建立程式庫封裝細節
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 11. DOM、事件與樣式
Similaire à 11. DOM、事件與樣式 (20)
Plus de Justin Lin
Plus de Justin Lin (20)
11. DOM、事件與樣式
- 2. 11. DOM、事件與樣式 • 學習目標 – 認識DOM操作 – 處理事件 – 掌握樣式 – 建立程式庫封裝細節 2
- 3. 瀏覽器物件模型 • Browser Object Model • Level 0 DOM 3
- 5. • navigator代表了瀏覽器 • location代表HTML頁面的URL • frames收集了視窗中擁有的iframe對應 物件 5
- 6. • screen物件包括視窗目前所處的螢幕資訊 • history包括了瀏覽器瀏覽歷史 • document代表整份HTML文件 – forms、links、anchors、images… 6
- 7. 7
- 8. • 想要取得文件中name為login的表單 • forms、links、anchors、images等， 都可以用這種方式來取得各自對應的元素 • 想取得name屬性為"user"的輸入文字框 8
- 9. • 超鏈結與錨點都是使用a標籤定義 – 超鏈結使用href屬性 – 錨點使用name屬性 • document.links與 document.anchors分別用來表示超鏈結 與錨點元素 • documents.images表示文件中的img標 籤對應的元素 9
- 11. 文件物件模型 • Document Object Model（DOM）是 W3C制定 11
- 12. 12
- 13. • document是Document的實例，代表整份 文件，而不是html標籤節點 • document.documentElement也可用來 取得html標籤對應的元素 • 如果想取得body標籤元素，可以透過 document.body來取得 • 文字也會形成樹狀結構中的元素。 13
- 14. • DOM API分為兩部份，一個是核心DOM API，一個是HTML DOM API 14
- 15. 走訪HTML文件 • parentNode：取得父節點 • previousSibling：前鄰接節點 • nextSibling：後鄰接節點 • firstChild：首個子節點 • lastChild：最後一個子節點 • childNodes：所有直接子節點 15
- 16. 16
- 17. • parentElement：取得父元素。 • previousElementSibling：前鄰接元 素 • nextElementSibling：後鄰接元素 • firstElementChild：首個子元素 • lastElementChild：最後一個子元素 • children：所有直接子元素 17
- 18. 18
- 19. • getElementsByTagName() • getElementById() • getElementsByName() • getElementsByClassName() 19
- 20. 20
- 22. 22
- 23. 標籤屬性與DOM特性 • 屬性（Attribute）與特性（Property） • 多數情況下，屬性名稱是什麼，特性名稱 也會是什麼，如果標籤上設定某屬性，屬 性值為何，特性值多半就是為何 23
- 24. • 若標籤沒有設置屬性，DOM物件上的特性 會有預設值 • JavaScript中的保留字或關鍵字必須迴避 • for屬性 htmlFor特性 24
- 25. • img標籤的src屬性，就算設定為相對URL， 從對應的DOM物件上src特性取得的值一 律都是絕對URL • 特性名稱有大小寫之別 – cellspacing、colspan、frameborder、 maxlength、readonly、rowspan、 tabindex、usemap等 – 要透過DOM特性取得必須是cellSpacing、 colSpan、frameBorder、maxLength、 readOnly、rowSpan、tabIndex、useMap 等 25
- 26. • 有個初學者常犯的錯誤，忽略了文字也是 DOM節點 • innerHTML • textContent 26
- 27. attributes特性 27
- 28. • getAttribute() • setAttribute() • removeAttribute() • 沒有任何操作可以將DOM對應於屬性的特 性移除 28
- 30. • 對input來說，想要影響 getAttribute('value')的結果 – 修改defaultValue – 透過setAttribute() 30
- 31. 修改DOM樹 31
- 32. 32
- 33. 33
- 34. 34
- 36. 大量節點操作 36
- 37. 封裝DOM操作 37
- 38. 38
- 39. 39
- 40. 40
- 41. 41
- 42. 42
- 43. 43
- 44. 44
- 45. 45
- 46. 46
- 47. 47
- 48. 48
- 49. 49
- 50. 50
- 52. 52
- 53. • 行內模型（Inline model）或行內註冊模型 （Inline registration model） 53
- 55. 55
- 56. • 若是使用行內模型… 56
- 59. • 事件模型在DOM Level 2時獲得標準化 • 允許事件設置多個事件處理器 • Edge、Internet Explorer 9/10/11都支援 標準事件模型 • 使用addEventListener()方法來註冊事 件處理器 59 標準事件模型
- 60. 60
- 61. 61
- 62. 標準事件傳播 • Event實例會作為事件處理器的的第一個 參數 • 若要取得操作的目標物件，可以透過 Event實例的target特性 • 事件氣泡傳播（Event Bubbling） – 事件不僅會觸發操作的目標元素，還會往目標 元素的父階層傳播並觸發事件 62
- 63. 63
- 65. • 標準事件模型中，事件其實會歷經兩個傳 播階段 – 捕捉階段（Capturing phase – 氣泡階段（Bubbling phase） 65
- 66. 封裝事件處理 66
- 67. 67
- 68. 68
- 70. style特性 70
- 72. • 如果沒有設置style屬性，透過style特 性，取得的各個樣式值就會是空字串 • 透過樣式表定義的樣式資訊，無法從元素 的style特性取得 • 建議將style特性用於設定樣式，而不是 取得樣式 72
- 73. • 想取得元素的樣式資訊，建議取得元素的 計算樣式（Computed style） • 在遵守標準的瀏覽器，可以使用window的 getComputedStyle()函式 73
- 74. 74
- 76. • 內容（content） • 邊框（border） • 內距（padding） • 邊距（margin） 76
- 78. 78
- 80. 80
- 81. 81
- 82. 82
- 83. 存取元素位置 • 樣式的position屬性可以設定不同的值， 代表元素的定位方式 – static – relative – absolute – fixed • 元素的top、left、bottom、right 83
- 85. • relative是指元素相對於static應有的 位置進行偏移 • 依序、流動式地繪製版面之後，依top、 left或bottom、right設定偏移 – 若元素左上位置，在本來流動式地繪製後 100x50 – 若設定元素的position為relative，而top、 left分別為20、30的話 – 元素最後的左上角位置會是 (100+20)x(50+30)=120x80 的位置 85
- 86. • position屬性設為absolute表示絕對定 位 • 以最接近的非static父元素為絕對定位參 考元素 – 若有個a是relative定位，其中有個span是 absolute定位 – 那麼span設定的top、left，會是以a元素的 上緣與左緣來進行絕對定位 86
- 87. • 在絕對定位時，元素可以堆疊 • 可利用z-index屬性來設定堆疊順序，數 值越大，表示在越上層 • z-index預設是頁面中標籤定義的順序， 越後面定義的標籤z-index越大 87
- 88. 88
- 89. 89
- 90. 90
- 91. • fixed定位是以瀏覽器視埠（view-port） 為參考 – 例如，想讓某元素在捲動後，依舊可以在可視 畫面中的100x50 的位置 – 可以將position設為fixed，此時top、 left與bottom、right就是相對於可視畫面 91
- 92. • 若要取得元素相對於body的確實位置，必 須認識元素的offsetParent特性 • offsetParent是元素的父階層中最接近 的已定位（positioned）元素 • 如果元素本身的position被設為fixed， offsetParent會是null 92
- 93. • 在不考慮捲軸的情況下 93
- 94. 94
- 95. 95
- 96. 96
- 97. 顯示、可見度與透明度 • display • visibility • opacity 97
- 99. 99
- 100. 100
- 101. • 設定style的visibility為visible或 hidden，就是純綷視覺上可見或隱藏 • hidden時雖然畫面上看不見，排版仍會考 慮，也就是元素在畫面上仍會佔有空間 101
- 102. 102
- 104. 104
- 105. 105
- 106. 106
- 107. 操作class屬性 • 標籤的class屬性可以設罝多個類別名稱， 多個類別之間，必須使用空白區隔 • 在早期的DOM API，若想使用程式來確定 class屬性是否設置了某名稱，必須剖析 這個以空白作區隔的字串 • 若要新增或刪除類別，必須在字串中附加 或剔除名稱 107
- 108. 108
- 110. 110
- 111. 111
- 112. 視窗維度相關資訊 • 要取得文件寬高，可以在 document.documentElement以 scrollWidth、scrollHeight取得。 • 要取得body高，可以使用document.body的 scrollWidth、scrollHeight取得。 • 要取得螢幕資訊，screen有可以使用的特性： • 要取得螢幕的寬高，可以使用width、 height取得。 • 要取得螢幕可用區域的寬高，不含工具列的範 圍，可在availWidth、availHeight取得。 112
- 113. • 瀏覽器寬高等相關的資訊，可以在 window 物件上取得： • 視窗在螢幕中的位置：screenX、screenY。 • 視窗寬、高：outerWidth、outerHeight。 • 視埠區域寬高（不包括選單、工具列、捲軸）： innerWidth、innerHeight。 • 水平、垂直捲軸位置：pageXOffset、 pageYOffset。 113
- 114. 封裝樣式處理 114
- 115. 115
- 116. 116
- 117. 117
- 118. 118
- 119. 119
- 120. 120
- 121. 121
- 122. 122
- 123. 123
- 124. 124
- 125. 125