dokumen

dokumen

Objek dokumen mewakili halaman semasa. Memandangkan HTML diwakili sebagai struktur pepohon dalam bentuk DOM dalam penyemak imbas, objek dokumen ialah nod akar bagi keseluruhan pepohon DOM.

Atribut tajuk dokumen dibaca daripada <title>xxx</title> dalam dokumen HTML, tetapi ia boleh ditukar secara dinamik:

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

Sila perhatikan perubahan tetingkap penyemak imbas tajuk.

Untuk mencari nod dalam pepohon DOM, anda perlu mula mencari dari objek dokumen. Carian yang paling biasa digunakan adalah berdasarkan ID dan Nama Teg.

Kami mula-mula menyediakan data 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>

Menggunakan getElementById() dan getElementsByTagName() yang disediakan oleh objek dokumen, anda boleh mendapatkan nod DOM mengikut ID dan sekumpulan nod DOM mengikut nama Tag :

'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);

Mocha

Kopi Mocha Panas

Yogurt

Yogurt Lama Beijing

Jus

Jus epal yang baru diperah

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


Meneruskan pembelajaran
||
<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>
  • Cadangan kursus
  • Muat turun perisian kursus