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>

?

轉載于:https://www.cnblogs.com/zero1230/p/9960373.html

總結

以上是生活随笔為你收集整理的JavaScript DOM介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。