DOM の概要

HTML DOM を通じて、JavaScript HTML ドキュメントのすべての要素にアクセスできます。

HTML DOM (ドキュメントオブジェクトモデル)

Web ページが読み込まれると、ブラウザーはページのドキュメントオブジェクトモデルを作成します。

HTML DOM モデルは、オブジェクトのツリーとして構築されます:

HTML DOM ツリー

プログラム可能なオブジェクトモデルを通じて、JavaScript は動的な HTML を作成するのに十分な能力を獲得しました。

JavaScriptはページ内のすべてのHTML要素を変更できます
JavaScriptはページ内のすべてのHTML属性を変更できます
JavaScriptはページ内のすべてのCSSスタイルを変更できます
JavaScriptはページ内のすべてのHTML要素を変更できますページイベントへの反応

HTML 要素の検索

通常、JavaScript では HTML 要素を操作する必要があります。

これを行うには、まず要素を見つける必要があります。これを行うには 3 つの方法があります:

ID で HTML 要素を検索
タグ名で HTML 要素を検索
クラス名で HTML 要素を検索

ID で HTML 要素を検索

DOM 内で HTML 要素を検索する最も簡単な方法は、要素の ID を使用することです。

この例では id="intro" 要素を検索します:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

要素が見つかった場合は、このメソッドはオブジェクトを使用し、要素を (in x) として返します。

要素が見つからない場合、x には null が含まれます。

タグ名で HTML 要素を検索します

この例では、id="main" の要素を検索し、次に id="main" の要素内のすべての <p> 要素を検索します。

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

クラス名でHTML要素を検索しますこの例では、

getElementsByClassName

関数を使用してclass="intro"の要素を検索します:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

HTML DOM チュートリアル

このチュートリアルの残りの部分では、次の内容を学習します:

HTML 要素のコンテンツを変更する方法 (innerHTML)
HTML 要素のスタイルを変更する方法 (CSS)
HTML DOM イベントに反応する方法
HTML 要素を追加または削除する方法

DOM HTML →