More Related Content
What's hot (20)
Similar to 11. DOM、事件與樣式 (20)
More from 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