DOM和BOM

神膘護體小月半發表於2019-02-16

DOM和BOM

DOM

概念

  • DOM:Document Object Model 文件物件模型。
  • DOM作用：操作頁面中的元素。
  • 頂級物件是document 就是指HTML或者XML檔案。
  • HTML側重於展示資料，XML側重於儲存資料，XHTML寫的是HTML程式碼，遵循的是XML 的規範。
  • 每一個HTML檔案都可以看成是一個文件物件，裡面所有的標籤的層次關係都可以看成是一個樹形結構圖，樹狀圖。
  • 頁面中所有的內容都是節點：標籤節點，屬性節點，文字節點。IE8中會忽略空白節點

  • 節點屬性

    • nodeType 如果是標籤，值為1；如果是屬性，值為2；如果是文字，值為3
    • nodeName 如果是標籤，值為大寫標籤名字；如果是屬性，值為小寫屬性名字；如果是文字，值為#text
    • nodeValue 如果是標籤，值為 null ；如果是屬性，值為屬性值；如果是文字，值為文字內容

  • 頁面中的標籤，標籤就是元素，元素就可以看成是物件，標籤也是節點。

    • 節點比元素大。
    • 根元素：頁面中最外邊的標籤
    • 文件元素：文件中的第一個元素，HTML文件元素就是< html>

繫結和解綁

  • 第一種寫法

    • 物件.on+”事件名字”=事件處理函式
    • 物件.on+”事件名字”=null

  • 第二種寫法

    • 物件.addEventListener(“事件名字”,命名函式,false);
    • 物件.revemoEventListener(“事件名字”,命名函式的名字,false);

  • 第三種寫法

    • 物件.attachEvent(“事件名字”,命名函式);
    • 物件.detachEvent(“事件名字”,命名函式的名字);

事件冒泡

  • 元素A中巢狀了另一個元素B，裡面元素B和外面元素A註冊了相同的事件，如果裡面元素B的事件觸發了，外面的元素A的該事件也會自動的觸發。
  • 阻止事件冒泡的兩種方法 window.event.cancelBubble=true 或者是 e.stopPropagation();

事件的三個階段

  • 事件捕獲階段，事件目標階段，事件冒泡階段
  • 事件階段有一個屬性，這個屬性是需要通過事件引數物件.eventPhase來獲取的
  • 屬性的值是：1->捕獲階段2->目標階段3->冒泡階段

  • e.type獲取的是當前觸發該事件的事件型別

    <script>
  var objs=[my$("dv1"),my$("dv2"),my$("dv3")];
  objs.forEach(function(element){
      element.addEventListener("click",function(e){
          console.log(this.id+"==="+e.eventPhase+"==="+e.type);
      },false);
  });
</script>

    false值由內向外，一般採用false

    dv3===2===click

    dv2===3===click

    dv1===3===click

    <script>
  var objs=[my$("dv1"),my$("dv2"),my$("dv3")];
  objs.forEach(function(element){
      element.addEventListener("click",function(e){
          console.log(this.id+"==="+e.eventPhase+"==="+e.type);
      },true);
  });
</script>

    true值由外向內

    dv1===1===click

    dv2===1===click

    dv3===2===click

DOM級別

  • DOM0 初級階段
  • DOM1 規定了節點的型別Node，一般使用DOM1
  • DOM2 新增了一些方法，但是很多瀏覽器並不支援
  • DOM3 大多數瀏覽器都沒有支援

全域性變數和隱式全域性變數

  • 全域性變數不會被刪除，隱式全域性變數會被刪除
<script>
  var num=10;//全域性變數
  number=20;//隱式全域性變數
  delete num;//刪除全域性變數
  delete number;//刪除隱式全域性變數
  console.log(typeof num);//number
  console.log(typeof number);//undefined
</script>

innerText和innerHTML

  • 設定文字內容的時候，用兩個都一樣

  • 設定標籤內容的時候

    • innerText設定標籤內容，顯示的是標籤+文字，標籤實際上是轉義出來了
    • innerHTML設定標籤內容，顯示的是效果
  • 如果想要設定文字，用誰都可以，如果想要有標籤效果，用innerHTML
  • 獲取標籤中的文字內容，使用innerText和innerHTML都可以，如果獲取的是元素中的標籤和文字內容，應該使用innerHTML

innerText和textContent

  • innerText：谷歌支援，低版本火狐不支援，高版本火狐支援，IE8支援
  • textContent：谷歌支援，火狐支援，IE8不支援
  • 瀏覽器不支援某屬性時，該屬性的型別是undefined

className

  • html標籤中的class屬性，在js 中是關鍵字，不能直接使用。所以， 物件.class=”值”; 這種寫法是錯誤的。應該這麼寫：物件.className=”值”;
  • 物件.style.屬性名=”值”; div.style.backgroundColor=”red”;
  • 物件.className=”值”; div.className=”cls”;

自定義屬性

  • 獲取自定義屬性的值 物件.getAttribute(“屬性的名字”); 返回值是該屬性的值
  • 設定自定義屬性的值 物件.setAttribute(“屬性的名字”,”值”);
  • removeAttribute，getAttribute，setAttribute三個方法不僅可以操作元素的自定義屬性及值，還可以操作元素的自帶屬性

隱藏方式

<script>
  zy$("btn").onclick=function(){
    zy$("div").style.display="none";//不佔位置      
    zy$("div").style.visibility="hidden";//佔位置
    zy$("div").style.opacity=0;//佔位置
    zy$("div").style.width=0;//佔位置
    zy$("div").style.height=0;
  }
</script>

設定樣式

  • 如果樣式的屬性是在style屬性中設定的，是可以直接獲取的
  • 如果樣式的屬性是在style標籤中設定的，不能直接獲取

獲取節點元素12個

<script>
 console.log(zy$("uu").childNodes);
 console.log(zy$("uu").children);//推薦使用
 console.log(zy$("uu").parentNode);//推薦使用
 console.log(zy$("uu").parentElement);
 console.log(zy$("uu").firstChild);
 console.log(zy$("uu").firstElementChild);
 console.log(zy$("uu").lastChild);
 console.log(zy$("uu").lastElementChild);
 console.log(zy$("uu").previousSibling);
 console.log(zy$("uu").previousElementSibling);
 console.log(zy$("uu").nextSibling);
 console.log(zy$("uu").nextElementSibling);
</script>

建立元素的三種方式

  • 第一種document.write
  • 第二種 物件.innerHTML=”標籤程式碼及內容”
  • 第三種 document.creatElement

定時器

setInterval()

  • 引數：程式碼
  • 引數：時間—-1000毫秒—1秒
  • 返回值：該定時器的id值
  • 執行過程：當頁面載入完畢後，過了一段時間才執行裡面的程式碼，再過一段時間再次裡面的程式碼，反覆執行
  • clearInterval(timeId);//清理定時器

setTimeout()

  • 引數：程式碼
  • 引數：時間—-1000毫秒—1秒
  • 返回值：該定時器的id值
  • 執行過程：當頁面載入完畢後，過了一段時間才執行裡面的程式碼，再過一段時間再次裡面的程式碼，只執行一次
  • clearTimeout(timeId2);//清理定時器

三大系列

offset系列

  • offsetLeft：元素相對左邊的橫座標
  • offsetTop：元素相對上面的縱座標
  • offsetWidth：元素的寬度，有邊框
  • offsetHeight：元素的高度，有邊框
  • offset系列獲取的值都是數字型別
  • offsetWidth（offsetHeight）獲取的元素本身的寬（高）+元素邊框的寬（高）
  • 如果父級元素脫離文件流，子級元素此時的offsetLeft獲取的是相對父級元素的pading+自己的margin
  • 如果元素自己脫離文件流，此時的offsetLeft獲取的事自己的left+自己的margin

scroll系列

  • scrollLeft：向左捲曲出去的橫座標
  • scrollTop：向上捲曲出去的縱座標
  • scrollWidth：內容實際的寬度，沒有內容就是元素的寬度，沒有邊框
  • scrollHeight：內容實際的高度，沒有內容就是元素的高度，沒有邊框

client系列

  • clientX：可視區域的橫座標
  • clientY：可視區域的縱座標
  • clientWidth：可視區域的寬
  • clientHeight：可視區域的高

BOM

概述

  • 瀏覽器中的頂級物件window，頁面中的頂級物件document
  • 頁面中所有的內容都是window的，變數是屬於window的，函式是屬於window的。
  • 因為頁面中所有的內容都是window，所以，window是可以省略不寫的。

系統對話方塊

  • alert() //不同瀏覽器中的外觀是不一樣的
  • confirm();//true確定,false取消
  • prompt() //不推薦使用

視窗物件

  • Window.open() 開啟視窗

    • 引數1:地址(內部的地址,外部的地址)
    • 引數2:開啟的方式：self 是在當前的頁面中開啟，blank是在新的選項卡中開啟
    • 引數3:好多的程式碼
  • window.close() 關閉視窗

  • Window.location物件

    • location相當於瀏覽器位址列，可以將url解析成獨立的片段

  • Window.navigator物件

    • window.navigator 的一些屬性可以獲取客戶端(瀏覽器)的一些資訊：
    • userAgent使用者當前瀏覽器資訊
    • platform使用者系統資訊（不準確）

  • Window.history物件

    • 歷史記錄管理：
    • 後退：history.back() history.go(-1)
    • 前進：history.forward() history.go(1)
    • 操作之後生成歷史記錄

相關文章