JS--DOM

標籤：pagex   bind   body   表示   調用   click   default   remove   文檔   

# DOM 基礎
## Document Object Model 
- 文件物件模型
- DOM就是讓我們可以通過JS來操作網頁
- 文檔
    - 文檔指的是整個網頁文檔
- 對象
    - 將網頁中的每一個部分都轉換為了一個對象
- 模型
    - 通過模型來表示對象之間的關係,方便我們尋找對象


### DOM 節點
- 節點是構成網頁的最基本的單位.網頁就是由節點構成的
- 節點又分為多種不同的類型:
    - 文檔節點  (doument)
        - 代表整個網頁
    - 元素節點    (element)
        - 代表網頁中的標籤
    - 屬性節點    (arreibute)
        - 代表標籤中的屬性
    - 文本節點    (text)
        - 代表網頁中的文本
        
### Document 對象方法
- document.getElementById("id屬性值")
    - 根據元素的id屬性值,尋找一個元素節點
- document.getElementsByTagName("標籤名")
    - 根據標籤名,查詢一組元素節點對象
- document.getElementsByName("name屬性值")
    - 根據元素的name屬性值,尋找一組元素節點對象 (用於表單返回一個數組)
- document.getElementsByClassName(‘class屬性值‘)
    - 根據class屬性值擷取一組元素節點對象
- **document.querySelector("CSS選取器")**
    - 根據css選取器去頁面中尋找對象
    - 只返回一個合格元素
- **document.querySelectorAll("CSS選取器")**
    - 匹配的CSS選取器的所有元素節點列表
    - 將所有合格元素封裝到一個數組中返回
- **document.addEventListener()**
    - 第一個參數: 要綁定的事件(字串格式.沒有on)
    - 第二個參數: 回呼函數(事件觸發時函數執行.形參event)
    - 第三個參數: 是否在捕獲階段觸發事件(預設false)
- document.createElement(‘標籤名‘)
    - 可以根據標籤名來建立一個指定的元素節點對象
- document.createTextNode(‘常值內容‘)
    - 可以根據常值內容建立一個文本節點對象
    
### Document 對象屬性
- document.body
    - 可以用來擷取頁面中的body元素
- document.documentElement
    - 可以擷取頁面的根項目
- document.all 
    - 可以擷取頁面的所有元素

----------


### element方法
- element.childNodes
    - 擷取當前元素所有的子節點
    - 包括空白的文本節點
- element.children
    - 擷取當前元素所有的子節點
    - 不包括文本節點
- element.firstChild
    - 擷取當前元素的第一個子節點
- element.lastChild
    - 擷取當前元素的最後一個子節點
- element.prentNode
    - 擷取當前元素的父節點
- element.previousSibling
    - 擷取當前元素的前一個兄弟節點
    - previousElementSibling(不包括空白文本)
- element.nextSibling
    - 擷取當前元素的後一個兄弟節點
    - nextElementSibling (不包括空白文本)
- element.appendChild()
    - 為元素添加一個新的子項目
- element.insertBefore()
    - 在指定的子節點前插入新的子節點
    - 第一個參數:新的節點
    - 第二個參數:要添加新的節點前的子節點
- element.replaceChild()
    - 指定子節點替換現有的
    - 第一個參數: 要插入的節點
    - 第二個參數: 要移除的節點
- element.removeChild()
    - 刪除一個子節點
- element.cloneNode()
    - 複製某個元素
    - 參數: true 表示深度複製
### element屬性
- element.className
    - 設定或返回元素的class屬性
- element.innerHTML
    - 擷取和設定元素內部的html代碼
- element.innerText
    - 擷取和設定元素內部的常值內容
- element.nodeValue
    - 文本節點可以通過nodeValue屬性擷取和設定文本節點的內容
- **element.classList**
    - 操作 class 屬性的對象
    - classList.add(); 為一個DOM動態“追加”一個類(class)
    - classList.remove();為一個DOM動態“刪除”一個類(class)
    - classList.toggle();切換一個class屬性的狀態
    - classList.contanins() 是否包含某class屬性
    - length 擷取類別選取器的個數

### arreibute屬性相關
- element.getAttribute()
    - 擷取指定元素的屬性值
- element.removeAttribute()
    - 從元素中刪除指定屬性
- element.setAttribute()
    - 設定或改變指定屬性並指定值
    - 第一個參數: 要添加的屬性名稱
    - 第二個參數: 要添加的屬性值
- attr.name
    - 返回屬性名稱
- attr.value
    - 設定或返回屬性值
    
### DOM修改CSS樣式
- 文法: 元素.style.樣式名 = 樣式值;
- 樣式名需要將其修改為駝峰命名法
- 通過style修改的樣式都是元素的內聯樣式.所以優先順序最高
#####  getComputedStyle()
- 第一個參數: 要擷取樣式的元素
- 第二個參數: 要擷取元素的偽類. 不需要的話傳null
##### 相容IE8的擷取樣式函數
- 第一個參數: 要擷取樣式的元素
- 第二個參數: 要擷取的樣式的名字

        function getStyle(obj,name){
          if(window.getComputedStyle){
              return getComputedStyle(obj,null)[name];
          }else{
              return obj.currentStyle[name];
            };
          };
#### 其他CSS樣式修改
-  clientWidth
-  clientHeight
    - 擷取元素的可見寬度和高度
    - 包括元素的內容區和內邊距
    - 唯讀
- offsetWidth
- offsetHeight 
    - 擷取元素整個可見框大小
    - 包括內容區內邊距和邊框
- offsetParent
    - 返回當前元素的定位父元素
    - 最近開啟了定位的祖先元素
    - 如果沒有開啟定位則返回body
- offsetLeft 水平位移量
- offsetTop 垂直位移量 
    - 擷取當前元素相對於其定位父元素的位移量
- scrollHeight
- scrollWidth
    - 擷取元素捲動區域的高度和寬度
- scrollTop
    - 垂直捲軸滾動的距離
- scrollLeft
    - 水平捲軸滾動的距離
- clientX
    - 可以擷取滑鼠指標的水平座標
- clientY
    - 可以擷取滑鼠指標的垂直座標
- pageX
- pageY
    - 可以擷取滑鼠指標相對於頁面的座標
        

### DOM事件 event
- 事件指的使用者和網頁或瀏覽器之間的互動行為
- 需要為事件綁定響應函數來處理事件
      - e.pageX/Y   絕對位置
      - e.clientX/Y   基於視口
      - e.offsetX/Y  相對定位
      
#### 文檔載入
- 瀏覽器在載入一個頁面時,是按照自上向下的順序載入
- 如果將js代碼寫在頁面最上邊,在JS代碼執行時,頁面還沒有載入完畢就會導致無法正常擷取到DOM對象
- 解決方案
    - 將js代碼寫在body標籤的下邊
    - 將js代碼寫在````window.onload = function( ){ }; ````裡面.onload回呼函數會在頁面載入完畢以後執行
#### 事件處理中的this 
- 在事件處理常式內的 this 所引用的對象即是設定了該事件處理常式的元素。
- 事件給哪個對象綁定的 this就是哪個對象
#### 取消預設行為
- return false 適合dom0
- event.preventDefault(); 適合dom2
#### 事件對象
- 當瀏覽器呼叫事件的響應函數時,每次都會傳遞進一個事件對象,作為參數
- 在事件對象中封裝了當前事件相關的資訊.
- **event 作為形參注入到函數裡作為事件對象**
#### 冒泡
- 冒泡簡單來說就是事件的向上傳導. (結構上的關係.不是表現上面的)
- 當後代元素上的事件被觸發時,將會導致祖先元素上的相同事件也被觸發
- 大部分情況下冒泡都是對開發有利的.它可以簡化我們的開發
- 如果不希望發生事件的冒泡.則可以通過事件對象來取消冒泡
- 取消冒泡
    - event.stopPropagation()
    - event.cancelBubble = true
#### 事件委派
- 統一將多個元素上的事件綁定到他們共同的祖先元素上.
- 這樣我們只需要綁定一次即可同時處理多個元素上的相同事件
- 這樣簡化了代碼開發.這樣也確保新添加的元素上也可以有事件響應函數.
- target屬性 ---> 事件由誰觸發誰就是target

#### 事件監聽 
- addEventListener() 普通瀏覽器
    - 第一個參數: 要綁定的事件(字串格式.沒有on)
    - 第二個參數: 回呼函數(事件觸發時函數執行.形參event)
    - 第三個參數: 是否在捕獲階段觸發事件(預設false)
- attachEvent() IE瀏覽器
    - 第一個參數: 綁定的事件 (字串格式.需要on)
    - 第二個參數: 回呼函數

###### 事件監聽 (相容IE8)
參數:

- obj 要綁定事件的對象
- eventStr 事件的字串
- callback 回呼函數.事件觸發時調用的函數

        function bind(obj,eventStr,callback){
             if(obj.addEventListener){
                obj.addEventListener(eventStr,callback,false)
            }else{
                attachEvent()
                obj.attachEvent("on"+eventStr,function(){
                callback.call(obj);
              });
          }

#### 事件的傳播
- 捕獲階段
    - 事件從最外層的元素(document),向目標元素進行事件的捕獲
    - 該階段預設不會觸發
- 目標階段
    - 觸發事件的元素.捕獲到目標元素則捕獲階段停止
- 冒泡階段
    - 事件從目標元素向祖先元素中冒泡. 此時開始觸發事件
    

##### 滑鼠相關事件
- onclick 按一下滑鼠事件
- ondbclick 滑鼠雙擊事件
- onmousemove 滑鼠移動事件
- onmouseenter 滑鼠移入元素時觸發
- onmouseleave 滑鼠移出元素時觸發
- onmouseover 滑鼠移到某元素之上時觸發
- onmousedown 滑鼠按下時
    - contextmenu  右鍵菜單
    - e.button == 0 左鍵
    - e.button == 1 滾輪鍵
    - e.button == 2 右鍵
- onmouseup 滑鼠鬆開時

##### 鍵盤相關事件
- onkeydown 某個按鍵按下時
    - event.keyCode 確認按下的鍵
- onkeyperss 按鍵被按下並鬆開
- onkeyup 按鍵鬆開時

##### 其他重要事件
- onload 當頁面載入完成時
- onresize 當視窗被調整時
- onscroll  捲軸滾動時觸發的事件
- onblur 元素失去焦點時觸發
- onfocus 元素擷取焦點時觸發
- onchange 當input輸入值失去焦點發生改變會觸發該事件
- oninput 即時記錄input表單輸入的內容



##### 滾輪相關事件
**ie/chrome : onmousewheel(dom0)**

    event.wheelDelta
        上：120
        下：-120
            
**firefox : DOMMouseScroll 必須用(dom2的標準模式)**

    event.detail
        上：-3
        下：3

- return false阻止的是  dom0 所觸發的預設行為
- dom2 需要通過event下面的event.preventDefault();

JS--DOM