ホームページ > 記事 > ウェブフロントエンド > HTML DOM を使用して JavaScript ドキュメント要素にアクセスするためのコード例
HTML DOM を使用して JavaScript ドキュメント要素にアクセスするためのコード例
- 零下一度オリジナル
- 2017-05-05 11:51:391651ブラウズ
HTML DOM を通じて、JavaScript HTML ドキュメントのすべての要素にアクセスできます。
HTML DOM (ドキュメント オブジェクト モデル)
Web ページが読み込まれると、ブラウザーはページのドキュメント オブジェクト モデル (Document Object Model) を作成します。
HTML DOM モデルはオブジェクトのツリーとして構築されます。
HTML DOM ツリー
プログラム可能な オブジェクト モデルを通じて、JavaScript は動的な HTML を作成するのに十分な能力を獲得します。
JavaScriptはページ内のすべてのHTML要素を変更できます
JavaScriptはページ内のすべてのHTML属性を変更できます
JavaScriptはページ内のすべてのCSSスタイルを変更できます
JavaScriptはページ内のすべてのイベントに反応できます
HTML要素を検索します
通常、JavaScript では HTML 要素を操作する必要があります。
これを行うには、まず要素を見つける必要があります。これを行うには 3 つの方法があります:
ID で HTML 要素を検索する
タグ名で HTML 要素を検索する
クラス名で HTML 要素を検索する
ID で HTML 要素を検索する
DOM で HTML 要素を検索する最も簡単な方法このメソッドは要素の ID を使用します。
例
この例では、id="intro" を持つ要素を検索します。
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p id="intro">hello</p>
<p>本例演示 <strong>getElementById</strong> 方法</p>
<script>
x = document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>
</body>
</html>要素が見つかった場合、メソッドはそれをオブジェクトとして (x 内に) 返します。
要素が見つからない場合、x には null が含まれます。
タグ名で HTML 要素を検索する
例
この例では、id="main" の要素を検索し、次に "main" 内のすべての e388a4556c0f65e1904146cc1a846bee 要素を検索します:
[html] view plain copy
<html xmlns=www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x = document.getElementById("main");
var y = document.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段落文本是：' + y[0].innerHTML);
</script>
</body>
</html>IE でクラス名で HTML 要素を検索します5 、6、7、8 では無効です。
【関連おすすめ】
2. HTML開発マニュアル
3. php.cnオリジナルのHTML5ビデオチュートリアル
以上がHTML DOM を使用して JavaScript ドキュメント要素にアクセスするためのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。