DOM基本認識

DOM基礎

• 文檔對象模型

  • element

  • attribute

  • text

• 獲取元素節點

  • old

    • getElementByid

    • getElementsByClassname

    • getElementsByTagName

    • getElementsByName

  • new

    • querySelector

    • querySelectorAll

  • 表單

    • 表單元素

      • document.[formName]

    • 表單字段

      • formelement.[ormFieledName]

  • 找親戚

    • node

    • elementNode

      • children

      • parentElement

      • previousElementSibling

      • nextElement

      • firstElementChild

      • lastElementChild

• 操做節點

  • 插入節點

    • appendChild

    • insertBefore  

  • 替換

    • replaceChild

  • 刪除

    • removeChild

    • remove

  • 建立

    • createElement

  • 克隆

    • cloneNode //淺克隆 （true深克隆）

• 屬性節點

  • 方案1：element[屬性名]

  • 方案2：xxAttribute

    • get

    • set

    • remove

    • has

  • 自定義屬性

    • 設置是在HTML中加data-

    • 獲取是element.dataset自定義屬性名

• 文本節點

  • innerHTML

  • innerText

• 樣式操做

  • 行內樣式對象  element.style

  • 計算後樣式對象  computedStyle（element）

  • Object.assign

 

DOM事件

三要素：

• 事件源

• 事件類型

• 事件處理函數

 

事件的使用：

1. 註冊 不用管

   • 原生事件

   • 自定義事件 const event=new Event("事件名稱")

2. 綁定

   • dom0

     • html

     • document.onclick=handler

   • dom2

     • document.addEventListener("click",listener)

3. 觸發

   • 原生：通常是知足通常交互條件

   • 自定義事件 element.dispatch(event)；

事件流

• 捕獲

• 冒泡流

  • 現代DOM流   前兩種的結合 

事件代理（沒有事件流就沒有事件代理）

1. 找父親                                                            第一個靜態父級

2. 父親綁事件                                                    

3. 監聽器內部經過event.target過濾

4. 寫代理代碼

事件對象

• target

• 鍵盤  which

• 鼠標 

  • offsetX

  • pageX

  • clientX

• preventDefault

• stopPropagation

表單事件

• blur

• focus

• input

• change

• submit

• reset