書類
document
document オブジェクトは現在のページを表します。 HTML はブラウザ上では DOM 形式のツリー構造として表現されるため、ドキュメント オブジェクトは DOM ツリー全体のルート ノードになります。
ドキュメントの title 属性は HTML ドキュメントの <title>xxx</title> から読み込まれますが、動的に変更することができます:
<html> <head> <script> 'use strict'; document.title = '努力学习JavaScript!'; </script> </head> <body> </body> </html>
ブラウザ ウィンドウのタイトルの変更を観察してください。
DOM ツリーでノードを見つけるには、ドキュメント オブジェクトから検索を開始する必要があります。最も一般的に使用される検索は、ID とタグ名に基づきます。
最初に 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>
ドキュメント オブジェクトによって提供される getElementById() と getElementsByTagName() を使用して、ID によって DOM ノードを取得し、タグ名によって 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);Mocha
ホットモカコーヒー
ヨーグルト
北京古ヨーグルト
ジュース
しぼりたてのリンゴジュース
rreee
新しいファイル
<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>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
