文件

document

document物件表示目前頁面。由於HTML在瀏覽器中以DOM形式表示為樹狀結構,document物件就是整個DOM樹的根節點。

document的title屬性是從HTML文件中的<title>xxx</title>讀取的,但是可以動態改變:

<html>
<head>
    <script>
        'use strict';
        document.title = '努力学习JavaScript!';
    </script>
</head>
<body>
</body>
</html>

請觀察瀏覽器視窗標題的變化。

要尋找DOM樹的某個節點,需要從document物件開始尋找。最常用的查找是根據ID和Tag Name。

我們先準備HTML資料:

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>

用document物件提供的getElementById()和getElementsByTagName()可以按ID取得一個DOM節點和按Tag名稱取得一組DOM節點:

'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;
menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'
drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
    s = s + drinks[i].innerHTML + ',';
}
alert(s);

摩卡

熱摩卡咖啡

優格

##北京老優格

果汁

#鮮榨蘋果汁

<html>
<head>
    <script>
        'use strict';
        var menu = document.getElementById('drink-menu');
        var drinks = document.getElementsByTagName('dt');
        var i, s, menu, drinks;
        menu = document.getElementById('drink-menu');
        menu.tagName; // 'DL'
        drinks = document.getElementsByTagName('dt');
        s = '提供的饮料有:';
        for (i=0; i<drinks.length; i++) {
            s = s + drinks[i].innerHTML + ',';
        }
        alert(s);
    </script>
</head>
<body>
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>
</body>
</html>


############
繼續學習
||
<html> <head> <script> 'use strict'; var menu = document.getElementById('drink-menu'); var drinks = document.getElementsByTagName('dt'); var i, s, menu, drinks; menu = document.getElementById('drink-menu'); menu.tagName; // 'DL' drinks = document.getElementsByTagName('dt'); s = '提供的饮料有:'; for (i=0; i<drinks.length; i++) { s = s + drinks[i].innerHTML + ','; } alert(s); </script> </head> <body> <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"> <dt>摩卡</dt> <dd>热摩卡咖啡</dd> <dt>酸奶</dt> <dd>北京老酸奶</dd> <dt>果汁</dt> <dd>鲜榨苹果汁</dd> </dl> </body> </html>