document
L'objet document représente la page actuelle. Étant donné que HTML est représenté sous forme d'arborescence sous forme de DOM dans le navigateur, l'objet document est le nœud racine de l'ensemble de l'arborescence DOM.
L'attribut title du document est lu à partir de <title>xxx</title> dans le document HTML, mais il peut être modifié dynamiquement :
<html>
<head>
<script>
'use strict';
document.title = '努力学习JavaScript!';
</script>
</head>
<body>
</body>
</html>
Veuillez observer le changement de la fenêtre du navigateur titre.
Pour trouver un nœud dans l'arborescence DOM, vous devez commencer la recherche à partir de l'objet document. Les recherches les plus couramment utilisées sont basées sur l'ID et le nom de la balise.
Nous préparons d'abord les données 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>
En utilisant getElementById() et getElementsByTagName() fournis par l'objet document, vous pouvez obtenir un nœud DOM par ID et un groupe de nœuds DOM par nom de balise :
'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);Moka
Café Moka Chaud
Yaourt
Yaourt vieux de Pékin
Jus
Jus de pomme fraîchement pressé
<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>
section suivante