DOM

概念

所謂DOM,全稱 Docuemnt Object Model 文件物件模型，毫無疑問，此時要操作物件，什麼物件？文件物件

在文件中一切皆物件，比如html,body,div,p等等都看做物件，那麼我們如何來點選某個盒子讓它變色呢？

DOM 為文件提供了結構化表示，並定義瞭如何通過指令碼來訪問文件結構。目的其實就是為了能讓js操作html元素而制定的一個規範。

解析過程

HTML載入完畢，渲染引擎會在記憶體中把HTML文件，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然後操作的時候修改的是該元素的屬性。

DOM樹（一切皆是節點）

整個html文件就是一個文件節點。所有的節點都是Object。

DOM可以做什麼

• 找物件（元素節點）
• 設定元素的屬性值
• 設定元素的樣式
• 動態建立和刪除元素
• 事件的觸發響應：事件源、事件、事件的驅動程式

清楚DOM的結構

• 獲取文件物件：document
• 獲取html：document.documentElement
• 獲取body: document.body

獲取其它DOM（事件源）的三種方式

var oDiv1 = document.getElementById("box1");      //方式一：通過id獲取單個標籤

var oDiv2 = document.getElementsByTagName("div")[0];     //方式二：通過 標籤名 獲得 標籤陣列

var oDiv3 = document.getElementsByClassName("box")[0];  //方式三：通過 類名 獲得 標籤陣列 
 

事件

JS是事件驅動為核心的一門語言

事件的三要素

事件的三要素：事件源、事件、事件驅動程式。

比如，我用手去按開關，燈亮了。這件事情裡，事件源是：手。事件是：按開關。事件驅動程式是：燈的開和關。

再比如，網頁上彈出一個廣告，我點選右上角的X，廣告就關閉了。這件事情裡，事件源是：X。事件是：onclick。事件驅動程式是：廣告關閉了。

誰引發的後續事件，誰就是事件源。

總結如下：

• 事件源：引發後續事件的html標籤。
• 事件：js已經定義好了

• 事件驅動程式：對樣式和html的操作。也就是DOM。

  程式碼書寫步驟如下：

• （1）獲取事件源：document.getElementById(“box”);

   //類似與ios語言的UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

• （2）繫結事件： 事件源box.事件onclick = function(){ 事件驅動程式 };

• （3）書寫事件驅動程式：關於DOM的操作

• 繫結事件的方式

  直接繫結匿名函式

   var oDiv = document.getElementById("box");
      oDiv.onclick = function () {
          alert("我是彈出的");
      };
  

  先單獨定義函式，再繫結

   var oDiv = document.getElementById("box");
      oDiv.onclick = fn;   //注意，這裡是fn
      //單獨定義函式
      function fn() {
          alert("我是彈出的內容");
      };

行內繫結

<!--行內繫結-->
<div id="box" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是彈出的內容");
    }

</script>