文档

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>

继续学习

新建文件

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX