Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

11. DOM、事件與樣式

65 views

Published on

認識DOM操作
處理事件
掌握樣式
建立程式庫封裝細節

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

11. DOM、事件與樣式

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

×