概念

• 文件：一個頁面就是一個文件，文件中有根元素——html——根元素
• 元素（element）：頁面中所有的標籤都是元素，元素可以看成是物件。標籤可以巢狀，標籤中有標籤，元素中有元素
• 節點（node）：頁面中所有的內容都是節點，標籤，屬性，文字。即元素屬於節點的一部分。
• root:根

由文件及文件中的所有元素（標籤）組成的樹形結構，叫做DOM樹

操作頁面例子引入

按鈕被點選，彈出對話方塊

• 按鈕：事件源
• 點選：事件名稱（onclick）
• 被點：觸發
• 彈框：響應

<!-- html與js一起寫。這裡alert是一個js程式碼 -->
<input type="buttom" value="點選" onclick="alert('你觸發了事件')"/>
 

<!-- html與js分離  版本1 -->
<input type="buttom" value="點選" onclick="f1()"/>
<script>
	function f1(){
        alert('你觸發了事件')"
    }
</script>

<!-- html與js分離  版本2 -->
<input type="buttom" value="點選" id="btn"/>
<script>
function f1(){
    alert('你觸發了事件')"
}

var btnObj=document.getElementById("btn")//根據id值獲取元素物件
btnObj.onclick=f1()//為物件新增事件
</script>
 

<!-- html與js分離  版本3 簡約-->
<input type="buttom" value="點選" id="btn"/>
<script>
document.getElementById("btn").onclick=function(){
    alert("你觸發了事件")
}
</script>

案例小結

dom的內容主要是通過案例理解的，偏操作性。這裡每個案例都包含相應的知識點。由於案例比較多，我把內容儲存到了github，可以點選案例小結獲取全部案例。根據自身需要學習。每個案例都會有相應註釋幫助理解

• innerText，給成對的標籤新增文字 案例2
• document.getElementsByTagName("標籤的名字")：根據標籤名字獲取標籤，返回一個偽陣列 案例4
• 在某個元素的事件中，自己的事件中的this就是當前這個元素的物件 案例6
• 排他功能，即點選一個事件前會重置標籤的屬性 案例7
• 表單標籤屬性的特性 案例10
• 封裝根據元素id獲取元素的函式及引用 common.js 案例11
• 只讀readonly與禁用disabled；表單標籤的內容可用value賦值 案例12
• 在js使用css樣式時：需要把-去掉，再把後面的單詞首字母大寫 案例13
• 點選按鈕實現按鈕值的切換 案例14
• 在js程式碼中DOM操作設定元素類樣式的時候，不用class關鍵字，而是用className。通常用於修改多個樣式的情況 案例15
• 通過判斷類樣式是否存在來修改類樣式 案例16
• 用三元表示式簡化類樣式切換及body標籤的獲取 案例17
• 阻止超連結預設跳轉，使用return false 案例18
• 實現相簿 案例19
• 根據表單標籤的name屬性獲取元素——getElementsByName('name的屬性值') 案例20
• 根據類樣式的名稱獲取元素——getElementsByClassName('樣式名稱') 案例21
• 滑鼠進入onmouseover與離開事件onmouseout 案例22
• 搜尋框獲取焦點onfocus與失去焦點onblur案例23
• 自定義屬性操作。getAttribute("屬性名")獲取屬性值；setAttribute(字串屬性，屬性值)設定新的屬性值；removeAttribute("屬性名")，移除屬性，也可以移出非自定義的屬性比如class 案例24
• tab切換，結合上面三個方法 案例25

一些梳理

DOM物件獲取元素

• document.getElementById('id屬性值')——根據id屬性值獲取，返回一個
• document.getElementsByTagName('標籤名稱')——根據標籤名獲取，返回一個偽陣列
• document.getElementsByName('name的屬性值')——根據name的屬性獲取，返回一個偽陣列
• document.getElementsByClassName('類名稱')——根據類名稱獲取，返回一個偽陣列
• document.querySelector('選擇器名稱')——根據選擇器獲取，返回一個
• document.querySelectorAll('選擇器名稱')——根據選擇器獲取，返回偽陣列

設定標籤文字內容

• textContext
• innerText
  相容性封裝——設定任意標籤中間的文字內容

  function setInnerText(element,text){
     //判斷瀏覽器是否支援
     if(typeof element.textContent=="undefined"){
         element.innerText=text
     }else{
         element.textContent=text
     }
  
  }
  

  相容性封裝—獲取任意標籤中間的文字內容

   function getInnerText(element){
       if(typeof element.textContent=="undefined"){
           return element.innerText;
       }else{
           return element.textContent;
       }
   
   }
  

innerHTML

可以設定html標籤內容，比如obj.innerHTML="<p>這個標籤可以被解析</p>"，還會獲取到標籤。而innerText只能獲取文字內容，且不能獲取標籤

節點

屬性

• nodeType

• nodeName

• nodeValue

父級節點

<div>
    <span></span>
    <p></p>
    <ul id="ul"></ul>
</div>

<script>
  var ul=document.getElementById("ul")
  //列印下方四項可得
  console.log(ul.parentNode)//<div>...</div>
  console.log(ul.parentNode.nodeType)//1
  console.log(ul.parentNode.nodeName)//DIV
  console.log(ul.parentNode.nodeValue)//null
</script>

子節點

 <div id="div">
     <span></span>
     <p></p>
     <ul id="ul"></ul>
 </div>

 <script>
   var div=document.getElementById("div")
   console.log(div.childNodes)//NodeList(7) [text, span, text, p, text, ul#ul, text]
 </script>

獲取元素或節點

• .parentElement---父級元素
• .children---子元素
• .firstChild---第一個子節點
• .firstElementChild---第一個子元素
• .lastChild---最後一個子節點
• .lastElementChild---最後一個子節點
• .previousSibling---某個元素的前一個兄弟節點
• .previousElementSibling---某個元素的前一個兄弟元素
• .nextSibling---某個元素的後一個兄弟元素
• .nextElementSibling---某個元素的後一個兄弟元素

建立節點

• createElement()——建立元素節點
• createAttribute()——建立屬性節點
• createTextNode()——建立文字節點

案例

• 通過節點操作改變元素的背景顏色
• 封裝節點相容程式碼
• 切換背景圖片
• 表格全選與全不選

元素

建立方式

1. document.white("標籤的程式碼及內容")

2. 物件.innderHTML="標籤及程式碼"

3. document.createElement(“標籤名字”)

   案例：

   • 用字串拼接的方式動態建立列表
   • 用createElement的方式建立列表
   • 優化方式3 限制只建立一個元素

一些DOM方法

• .appendChild——追加子元素
• .insertBefore(你要新增的元素，父元素.firstElementChild)——把新的子元素新增到第一個子元素的前面
• .removeChild(父元素.firstElementChild)——刪除父元素的第一個子元素

  案例
  綜合方法實現新增元素、刪除元素和全部刪除

• .getAttribute("屬性名")——返回指定的屬性值
• .setAttribute("屬性名","屬性值")——把指定屬性設定或修改為指定的值
• .removeAttribute("屬性名")——移除某一屬性

元素繫結事件

• addEventListener("事件型別",事件處理函式,控制事件的階段|布林值)

  //這裡的事件型別沒有on，this是當前繫結的物件
  addEventListener('click',function(){},false)
  

• attachEvent(“事件型別”,事件處理函式)

  //這裡的事件型別有on，this指的是window
  attachEvent('onclick',function(){})
  

  相容封裝

  function addEventListener(element,type,fn){
      if(element.addEventListener){
          element.addEventListener(type,fn,false);
      }else if(element.attachEvent){
          element.attachEvent("on"+type,fn)
      }else{
          element["on"+type]=fn
      }
  }
  

元素解綁事件

1. 給事件賦值null

   //物件.on事件名稱=nul
   obj.onclick=null
   

2. removeEventListener

   //注意：這種方法只能解綁命名函式事件
   //物件.removeEventListener("事件名稱",命名函式,false）
   obj.removeEventListener=("click",f1,false)
   

3. detachEvent

   //注意：這種方法只能解綁命名函式事件
   //物件.detachEvent("on事件名稱",命名函式）
   obj.detachEvent=("onclick",f1)
   

   相容封裝

   function removeEventListener(element,type,fn){
       if(element.removeEventListener){
           element.removeEventListener(type,fn,false);
       }else if(element.detachEvent){
           element.detachEvent("on"+type,fn)
       }else{
           element["on"+type]=null
       }
   }
   

事件的三個階段

1. 事件捕獲階段：從外到裡
2. 事件目標階段：你選中的那一個事件觸發
3. 事件冒泡階段：從裡到外

事件冒泡

多個元素巢狀，有層次關係，這些元素都註冊了相同事件。如果裡面的元素的事件觸發了，外面的元素的相同事件會自動觸發。事件從裡到外觸發。

事件捕獲

它與事件冒泡相反。如果你點選了最內層的事件，它不會從內容開始觸發，而是從外層依次往你點選的內層經過

阻止事件冒泡

1. 給內層元素的事件函式最後加上window.event.cancelBubble=true
2. 給事件傳入引數e——事件處理引數物件，並在函式內部加上e.stopPropagation()

冒泡階段與捕獲階段

//這裡用到了addEventListener的第三個引數，
//這個引數可以讓我們在捕獲階段和冒泡階段切換
//冒泡階段
obj.addEventListener("click",function(e){},false )
//冒泡階段
obj.addEventListener("click",function(e){},true)

其他

document.body		//獲取body標籤
document.title		//獲取title的值
document.documentElement		//獲取html

元素拓展

屬性

offset系列

• offsetWidth——獲取元素的寬 有邊框|只讀

• offsetHeight——獲取元素的高 有邊框|只讀

• offsetLeft——獲取元素距離左邊的距離|只讀

• offsetTopt——獲取元素距離上邊的距離|只讀

• offsetParent——元素的父元素，如果沒有就是body元素|只讀

  元素的寬高樣式無法直接通過style獲取，除非你在style內聯屬性中設定，這時候就需要offset width和offsetheigth

  在一般情況下，位置的數值=父級元素的margin+padding+border+自己的margin
  在子絕父相脫離文件流的情況下，位置的數值=自己的位置+自己的margin

scroll系列

• scrollWidth——元素中內容的實際寬度 沒有邊框 如果沒有內容就是元素的寬

• scrollHeight——元素中內容的實際高度 沒有邊框 如果沒有內容就是元素的高

• scrollLeft——再有滾動條的情況下，內容隱藏的最左邊的距離到可見的最左邊的距離

• scrollTop——向上捲曲出去的距離，內容隱藏的最上邊的距離到可見的最上邊的距離

  //封裝getScroll函式：可以獲取頁面向上或向左捲曲出去的距離
  function getScroll(){
      return{
   left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,   top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
      }
  }
  

client系列

• clientWidth——可視區域的寬 沒有邊框
• clientHeight——可視區域的高 沒有邊框
• clientLeft——左邊框的寬度
• clientTop——上邊框的高度

• style——獲取/設定元素的style屬性
• accessKey——獲取/設定元素訪問的快捷鍵
• lang——獲取/設定元素屬性、文字、內容的語言
• e.onscroll=function——獲取或設定元素滾動時的事件
• e.onchange=function——獲取或設定元素的change時的事件.
• e.onblur = function——獲取或設定元素的失去焦點時的事件
• e.onclick = function——獲取或設定元素的click時的事件
• e.oninput = function(e)

方法

• e.blur()——元素失去焦點
• e.click()——觸發元素的點選事件
• e.focus()——元素獲得焦點