HTML DOM 快速導覽 - 文件物件 document

文件物件 document 有以下的屬性 (attribute) 與方法 (method)

文件物件 document 的屬性
名稱型態描述
document.activeElementElement回傳目前聚焦的元素物件
document.alinkColorString設定 <a> 元素在滑鼠點擊瞬間顏色
document.anchorsHTMLCollection所有連結所集合成的物件
document.bgColorString設定文件背景的顏色
document.cookieString設定 Cookie 資料
document.documentElementElement取得根元素的物件
document.documentURIString回傳文件中目前的網址
document.formsHTMLCollection回傳文件中所有表單集合成的物件
document.imagesHTMLCollection回傳文件中所有圖片集合成的物件
document.inputEncodingString回傳文件的編碼格式
document.lastModifiedString回傳文件最後修改的時間
document.lastStyleSheetSetString回傳文件最後的樣式表
document.linkColorString回傳連結 <a> 元素的文字顏色
document.linksHTMLCollection回傳文件中所有連結所集合成的物件
document.locationLocation回傳文件的 location 物件
document.pluginsHTMLCollection回傳文件中所有 <embed> 元素所集合成的物件
document.preferredStyleSheetSetString回傳文件作者的樣式表
document.readyStateString回傳文件目前的狀態
document.referrerString回傳連結到文件的 URI
document.selectedStyleSheetSetString回傳文件選擇的樣式表
document.styleSheetsHTMLCollection回傳文件樣式表所集合成的物件
document.styleSheetSetsHTMLCollection回傳文件樣式表所集合成的物件
document.titleString回傳文件的標題
document.URLString回傳文件的網址
document.vlinkColorString回傳連結 <a> 元素拜訪過的顏色


文件物件 document 的方法
名稱描述
document.close()關閉輸入串流
document.createAttribute(name_str)替元素物件新增屬性
document.createElement(element_str)替文件物件新增元素
document.createTextNode(text_str)替文件物件新增文字節點
document.enableStyleSheetsForSet(ss_str)設定文件物件的樣式表
document.getElementById(id_str)回傳 id 屬性的元素物件
document.getElementsByClassName(cn_str)回傳 class 屬性的集合物件
document.getElementsByName(n_str)回傳 name 屬性的集合物件
document.getElementsByTagName(tn_str)回傳元素標籤的集合物件
document.hasFocus()判斷本文件是否為目前視窗的焦點
document.open()開啟輸入串流
document.write(str)以不主動分行的方式，將字串寫入網頁
document.writeln(str)以主動分行的方式，將字串寫入網頁


舉例如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function run() {
    var c = randomColor();
    document.bgColor = c;
}
 
function randomColor() {
    var c1 = (Math.random() * 1000) % 256;
    var c2 = (Math.random() * 1000) % 256;
    var c3 = (Math.random() * 1000) % 256;
    c1 = hex(Math.floor(c1));
    c2 = hex(Math.floor(c2));
    c3 = hex(Math.floor(c3));
    return "#" + c1 + c2 + c3;
}
 
function hex(n) {
    var result = "";
    var temp, count;
    while (n > 16) {
        count = 1;
        while (n > exp(16, count)) {
            count += 1;
        }
        count -= 1;
        temp = n / exp(16, count);
        temp = Math.floor(temp);
        result += hexLetter(temp);
        n -= exp(16, count) * temp;
    }
    if (n == 16) {
        result += "1";
        n -= 16;
    }
    result += hexLetter(n);
     
    return result;
}
 
function hexLetter(n) {
    if (n >= 16 || n < 0) {
        return "";
    }
    else {
        switch (n) {
            case 10:
                return "A";
            case 11:
                return "B";
            case 12:
                return "C";
            case 13:
                return "D";
            case 14:
                return "E";
            case 15:
                return "F";
            default:
                return "" + n;
        }
    }
}
 
function exp(x, y) {
    var result = 1;
    while (y > 0) {
        result *= x;
        y -= 1;
    }
     
    return result;
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：document005.js
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例是藉由 randomColor() 函數 (function) 產生隨機的顏色，然後在 run() 中
3
document.bgColor = c;


將顏色指派給 document.bgColor ，文件背景顏色就會變換成所產生的隨機顏色。


我們以下面的 HTML 文件載入
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="document005.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="RUN" onclick="run();">
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：document005.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟，按下 RUN 就會改變背景顏色



中英文術語對照
屬性attribute
方法method
函數function
瀏覽器broswer


您可以繼續參考
基本概念
文件物件 document


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/document
http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)