1 of 22

HTML DOM

2 of 22

HTML DOM 簡介

  • 全名 HTML Document Object Model。

​

  • 將 Javascript 程式與畫面結合的關鍵概念。

3 of 22

HTML DOM 簡介

  • 每一份網頁包含許多 HTML 標籤，瀏覽器在讀取網頁時，會將這些標籤轉化成一種程式可使用的物件樹狀結構，即 HTML DOM。

​

  • 樹狀結構與 HTML 標籤的階層結構對應。

4 of 22

HTML DOM 範例：階層結構

  • 假設我們寫了以下 HTML 網頁。��<html>� <body>� <h3>HTML DOM</h3>� <div>� <span>階層結構</span>� <span>樹狀結構</span>� </div>� </body>�</html>

5 of 22

HTML DOM 範例：樹狀結構

window

history

document

screen

body

h3

div

span

span

紅色部分：所有網頁共通的結構�藍色部分：每個網頁都會不一樣�綠色框框：呈現在畫面上的部分

parent

child

sibling

6 of 22

window 物件

  • 此物件是 HTML DOM 中的最上層物件，在程式中隨時寫 window 即可取得。��window;�window.alert("Hello");�alert("Hello"); window 可省略不寫�window.prompt("Enter a number","");�window.confirm("Are you sure?"); 顯示確認視窗�window.open("http://www.google.com/"); 另開視窗�alert, prompt 等其實是隸屬於 window 物件下的方法

7 of 22

document 物件

  • document 物件是 window 物件的一個屬性，此物件包含許多重要的成員。��window.document; 此程式反應正確的概念�document; window 可省略不寫，方便使用�document.location="http://google.com/"; 載入新網頁�document.getElementById("title"); 取得 DOM 物件

8 of 22

screen 物件

  • screen 物件是 window 物件的一個屬性，此物件包含使用者螢幕的資訊。��window.screen;�window.screen.width;�window.screen.height;�取得螢幕解析度

9 of 22

練習目標

  • 簡單的利用一下系統內建的 HTML DOM 相關物件和功能。

10 of 22

程式操作畫面的步驟

  • 從 HTML DOM 中取得標籤物件，例如 div 標籤物件、a 標籤物件。

​

  • 更改標籤物件中的成員資料。

​

  • 不同的成員資料對應到不同的 HTML/CSS。

11 of 22

取得標籤物件

  • 標籤物件由系統在載入網頁時自動產生，我們只需要取出來使用即可。��<div id="title">Hello World</div>�<script type="text/javascript">� var divObject=document.getElementById("title");�</script>�HTML 語法中的 <div>....</div> 會被自動處理成 div 物件，我們再透過程式取出此物件以利未來使用

12 of 22

標籤物件的成員

  • 每個標籤物件都內建數十個屬性和方法，其中許多成員與 HTML 的概念直接對應。��<div id="title" class="bold">Hello World</div>�<script type="text/javascript">� var divObject=document.getElementById("title");� divObject.innerHTML; 標籤的內文� divObject.id; 標籤的 id 屬性設定� divObject.className; 標籤的 class 屬性設定�</script>

13 of 22

修改標籤物件的成員

  • 修改成員資料，就會修改相對應的 HTML。��<div id="title">Hello World</div>�<script type="text/javascript">� var div=document.getElementById("title");� alert(div.innerHTML); 印出 Hello World� div.innerHTML="Changed World";� 網頁畫面立即更新為 Changed World�</script>��

14 of 22

標籤物件的 style 屬性

  • 每個標籤物件都有 style 屬性。此屬性底下存放了所有在此標籤上的 CSS 設定。

假設變數 obj 存放一個 div 標籤物件

CSS 中的屬性

Javascript 物件中的對應

color

obj.style.color

padding

obj.style.padding

font-size

obj.style.fontSize

border-style

obj.style.borderStyle

15 of 22

標籤物件：再看一次

a 物件

<a id="google" class="link" href="http://www.google.com/" style="CSS設定" >Hello World</a>

網頁載入時被處理成物件結構

id:"google"

href:"http://www.google.com/"

className:"link"

style:

style 物件

color

border

fontSize

background

以下省略一百個 ……�所有的 CSS 屬性都是 style 物件的成員

16 of 22

HTML DOM 結構操作：新增

window

history

document

screen

body

h3

div

span

span

div

先用 Javascript 程式建立新的標籤物件�此時，物件尚未和 HTML DOM 建立聯結

17 of 22

HTML DOM 結構操作：新增

window

history

document

screen

body

h3

div

span

span

div

接下來，將新建立的標籤物件與 HTML DOM 做出聯結，意即：放在某個標籤的內層

18 of 22

HTML DOM 結構操作：新增

  • 以下程式碼完成上方描述的動作��var obj=document.createElement("div");�obj.innerHTML="這是新的 div 標籤物件";�利用 createElement 方法建立新的標籤物件��document.body.appendChild(obj);�利用 appendChild 將物件加入其他標籤物件的內部，此時，我們稱 div 標籤是 body 標籤的孩子

19 of 22

HTML DOM 結構操作：刪除

window

history

document

screen

body

h3

div

span

span

在程式中，取得想要刪除的標籤物件，與其父親物件

刪除目標

刪除目標的父親物件

20 of 22

HTML DOM 結構操作：刪除

window

history

document

screen

body

h3

div

span

span

呼叫父親物件的 removeChild 方法進行刪除

刪除目標

刪除目標的父親

21 of 22

HTML DOM 結構操作：刪除

  • 以下程式碼完成上方描述的動作��var obj=document.getElementById("target");�先取得刪除目標��obj.parentNode.removeChild(obj);�利用 parentNode 屬性取得刪除目標的父親，呼叫 removeChild 方法，並利用參數指定刪除對象

22 of 22

練習目標

  • 撰寫簡單的測試程式，確認了解以上內容。