DOM和BOM

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)
  • 操做以後生成歷史記錄