[Week 7] - DOM 介面、瀏覽器事件處理


Posted by Kayla on 2020-11-27

關於DOM

DOM 將 HTML 文件的文字、標籤等等,定義為物件,每個物件皆是一個節點 (node),這些節點最終會形成樹狀結構(DOM Tree)。

節點分類:

  • Document:HTML 檔案開端,所有一切皆會從 Document 開始往下執行。
  • Element:文件內的標籤,在 HTML 中的 tag 歸類在 element 中。
  • Text:在 tag 之間被包起來的文字。
  • Attribute:Tag 內的相關屬性。

透過 DOM 的 API,JavaScript 可以去存取、改變 HTML 架構、樣式或內容,以及設定節點的綁定事件。

DOM 事件怎麼傳遞的?捕獲跟冒泡是什麼?

事件傳遞的順序:
先捕獲,在冒泡。當事件傳遞時,會從根節點開始,往下傳遞到目標,傳遞到目標後,在一路往上回傳至最上層的 Windows。

  • 捕獲階段:DOM Tree 最上層 windows 往下傳遞到目標的過程。
  • 目標階段:到達時間目標。在到達目標本身時,並沒有捕獲與冒泡階段的區分。
  • 冒泡階段:目標往上傳遞至最上層 windows 階段。

選取元素

function 都放在 document 上,皆以 document 開頭,document 為瀏覽器提供的一個物件。Ex:const elements = document.getElementsbyTagName('div')

  • getElementsByTagName() 抓取指定的 tag 元素。
  • getElementsByTagClassName() 抓取指定的 classname 名稱元素。
  • getElementById() 抓取指定的 id。Note:只會有一個 id 所以 Element 沒有 s。

  • querySelector() CSS 選擇器名稱(#idName/ .className),但只會回傳匹配的 第一個元素。若同時有兩個同名稱 id,在選取時,只會選到第一個 id 元素。Note:選取 id / class 子元素寫法(#idName class

  • querySelectorAll()querySelector() 差異,querySelectorAll()可以選取多個元素。

改變元素

  • 利用 style 去改變樣式。EX:.stytle.padding>
    Note:style. 後面不可直接用 -,需使用['padding-top'] 或 駝峰式寫法 ['paddingTop']
    <div id='block'>
      hello
    </div>
    <script>
      const elements = document.querySelector('#block')
    element.stytle.padding = '10px' //將 id 為 block 的 padding 改為 10 px
    </script>
    
  • classList.add() 新增 / classList.remove()刪除 / classList.taggle() 與現況相反動作。
      <div id='block'>
          hello
      </div>
      <script>
          const element = document.querySelector('#block'); //尚未新增前
          element.classList.add ('active'); //新增一個 active class 
      </script>
    

瀏覽器事件處理

Event delegation

為了做事更有效率,通常會以分組選出組長,去進行活動。而事件代理,就是為了同一件要交辦的事,只需要交代最上層的人,去發布底下該如何進行,就能達到每個人都知道的功用。
例如要對 ul 底下多個 li 做事件監聽,這時候只需對 ul 事件監聽,底下的多個 li 也能夠監聽到事件。

event.preventDefault() 跟 event.stopPropagation() 差在哪裡?

兩者差異在於是否會繼續進行冒泡階段。

針對一個<a>連結做以下兩種不同的事件,在點擊時分別的的差異:

  • event.preventDefault() :
    在 HTML 部分元素有預設行為,當我們想取消原先行為去綁定新的事件。
    以舉例來說,當對 <a> 連結使用preventDefault,即是取消了原先所預設會連結至其他網頁的行為,但還是會進行冒泡階段。

  • event.stopPropagation():
    指阻止事件冒泡,到達該事件時,就不再進行冒泡階段。
    <a> 設定 stopPropagation 時,連結點擊依舊會被打開,事件會進行,但不往上進行後續的冒泡階段。

tags: 程式導師實驗計畫第四期 [FE102] Week7

##DOM







Related Posts

test

test

[第二週] 位元運算  判斷奇偶數不是只能取餘數

[第二週] 位元運算 判斷奇偶數不是只能取餘數

以人為本 — 團隊中的核心元素

以人為本 — 團隊中的核心元素


Comments