Transcript Document Object Model (DOM)

Document Object Model
文件物件模型
鄧姚文
http://www.ywdeng.idv.tw
Document Object Model (DOM)
• What is model 什麼是模型?
– Prototype or plan for the organization of 物件s on
a page 網頁內物件的組織架構
• 由 World Wide Web Consortium (W3C) 定義
• HTML 定義文章的內容與架構（章節、標題、
圖表）
• DOM 專注於物件的組織架構（階層式、樹
狀）
2
HTML文件基本結構
3
瀏覽器視窗內的DOM
視窗
瀏覽器
螢幕
歷史
位置
文件
4
瀏覽器視窗內的DOM
• window 物件:
– 代表瀏覽器視窗
– 若使用頁框（frame）則每一個頁框都有一個
window物件
– DOM的樹根
• navigator 物件:
– 唯讀
– 主要用於判斷瀏覽器的種類和版本
5
瀏覽器視窗內的DOM
• screen 物件:
– 唯讀
– 關於實體環境
• 螢幕的寬度與高度
• history 物件:
– 瀏覽的過程
– 主要用於控制『下一頁』、『上一頁』
6
瀏覽器視窗內的DOM
• location 物件:
– 主要用途：載入新的網頁
• document 物件:
– 代表HTML文件
– 包含HTML文件內的每一個標籤物件
• 不包括 html、head、body 等物件
7
DOM 物件階層
8
DOM 物件階層
9
DOM 物件階層
10
物件參照方式
（Object Reference）
• 網頁載入後，所有的物件以DOM的樹狀結
構儲存於主記憶體中
• DOM 物件命名方式
– 使用 id 屬性
11
DOM物件命名規則
•
•
•
•
•
不可以包含空白字元
不可以使用標點符號，底線（_）除外
必須以字串符號（單引號、雙引號）括住
第一個字元不可以使用阿拉伯數字
名稱必須唯一，不同物件的 id 必須相異
12
物件參照方式
• 以 document.getElementById(物件id) 抓取物
件
• 注意英文字母大小寫
– document.getElementByName() 傳回陣列，不是
單一物件
13
節點專有名詞
Document Node
Element Node
Parent Node
Child Node
Text Node
14
如何定義物件?
• Properties 屬性（資料）
• Methods 方法（副程式）
• Events (Handlers). 事件＆事件處理常式
15
Properties 屬性
16
Methods 方法
17
Events 事件
18
Window 和 Document 物件
19
window 物件
• 如何存取 window 的屬性＆方法
– window.propertyName
– window.methodName([parameters])
– self.propertyName
– self.methodName([parameters])
– propertyName
– methodName([parameters])
20
產生新的 window
• window.open() 打開新的視窗，載入新的網
頁
• 參數
– URL 指定載入的網址
– target 目標視窗的名稱
– 實體限制參數（包括寬度、高度和 chrome
contingent）
chrome : 包含 scrollbars、toolbars、status bar、menu bar 的區域
21
建立 window
22
23
window.open() 參數
•
•
•
•
•
•
•
•
•
•
height=100 視窗高度
width=400 視窗寬度
top=0 視窗左上角y座標
left=0 視窗左上角x座標
toolbar=no 是否顯示工具列，yes為顯示
menubar 選單
scrollbars 捲軸
resizable=no 是否允許改變視窗大小，yes為允許
location=no 是否顯示網址列，yes為顯示
status=no 是否顯示狀態列，yes為顯示
window.open ('page.html', 'targetWindow', 'height=100, width=400, top=0,
left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no,
status=no')
24
Window 屬性＆方法
• window.alert() method 顯示警訊
– This method generates a dialog box that displays
whatever text you pass as a parameter
– A single OK button (whose label you cannot
change) enables the user to dismiss the alert.
25
Window 屬性＆方法
• window.confirm() method 要求確認
– presents two buttons (Cancel and OK)
– returns a value: true if the user clicks OK or false if
the user clicks Cancel
– as a way to have a user make a decision about
how a script progresses
26
Window 屬性＆方法
• window.prompt() method 要求輸入
– displays a message that you set and provides a
text field for the user to enter a response
– Two buttons, Cancel and OK
– canceling the entire operation or accepting the
input typed in the dialog box.
27
<script type="text/javascript">
var answer = prompt("請輸入您的姓名：", "?");
if (answer) {
alert("您好！\n" + answer);
} else {
alert("真可惜！");
}
</script>
28
location 物件
• location.href = "http://www.ywdeng.com";
– 可以使用相對路徑
• 在別的 window 中載入網址
– newWindow.location.href = "http://www.ywdeng.com";
29
navigator 物件
• navigator.userAgent 瀏覽器
– returns a string with numerous details about the
browser and operating system
– Internet Explorer 7 in Windows XP:
• Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)
– Firefox 1.5 on a Macintosh:
• Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; enUS; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
30
navigator 物件
• navigator.appVersion 版本資訊
– Firefox 3.0 on Windows Vista
• 5.0 (Windows; zh-TW)
– Internet Explorer 7.0 on Windows Vista
31
Detecting Firefox x.x
<script type="text/javascript">
//test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ffversion>=3)
document.write("You're using FF 3.x or above")
else if (ffversion>=2)
document.write("You're using FF 2.x")
else if (ffversion>=1)
document.write("You're using FF 1.x")
}
else
document.write("n/a")
</script>
32
Detecting IE x.x
<script type="text/javascript">
//test for MSIE x.x;
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ieversion>=8)
document.write("You're using IE8 or above")
else if (ieversion>=7)
document.write("You're using IE7.x")
else if (ieversion>=6)
document.write("You're using IE6.x")
else if (ieversion>=5)
document.write("You're using IE5.x")
}
else
document.write("n/a")
</script>
33
document 物件
• document 物件包含實際的網頁內容
• document.forms[] 屬性
– Array of <form> 表單的陣列
– document.forms.length 表單數量
– document.forms[0] 存取第一個表單
– document.forms["formName"] 依名稱存取表單
– document.formName依名稱存取表單
34
document 物件
• document.images[] property
– Array of <img> 圖片的陣列
35
document 物件
• document.write() method 輸出字串
– Append output to the document
– Can include HTML tags
– After a page loads, the browser’s output stream
automatically closes
– After that, any document.write() method issued to
the current page opens a new stream that
immediately erases the current page
– 網頁載入完畢之後再以 document.write() 輸出
，會產生新網頁
36
document 物件
• document.close()
– Your script should close the output stream when it
finishes writing its content to the window (either
the same window or another).
37
document 物件
• 動態增刪節點
– document.createElement() 建立新元素節點（
element node）
– document.createTextNode() 建立新的文字節點
（text node）
– elementNode.appendChild(childNode) 將節點掛
進 DOM 樹
38
39
document 物件
• document.getElementById() method
– The sole parameter of this method is a quoted
string containing the ID of the element you wish
to reference
• document.getElementById("output")
– The method returns a value, which you typically
preserve in a variable for use by subsequent script
statements:
• var oneTable =
document.getElementById("salesResults");
40