JavaScriptによるHTML DOMの基本的な操作方法を詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:35:57

オリジナル

1187 人が閲覧しました

HTML DOM は、JavaScript HTML ドキュメントのすべての要素へのアクセスを提供します。
HTML DOM (ドキュメントオブジェクトモデル)
Web ページが読み込まれると、ブラウザはページのドキュメントオブジェクトモデルを作成します。
HTML DOM モデルはオブジェクトのツリーとして構築されます:
JavaScriptによる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" の要素を検索します:
例

var x=document.getElementById("intro");

ログイン後にコピー

要素が見つかった場合、メソッドは要素をオブジェクト (x 内) として返します。
要素が見つからない場合、x には null が含まれます。
タグ名で HTML 要素を検索
この例では、id="main" の要素を検索し、次に id="main" 要素内のすべての

要素を検索します。例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

ログイン後にコピー

クラス名で HTML 要素を検索この例では、getElementsByClassName 関数を使用して class="intro" を持つ要素を検索します:
例

var x=document.getElementsByClassName("intro");

ログイン後にコピー

HTML を変更 HTML DOM を使用すると、JavaScript で HTML 要素のコンテンツを変更できます。

HTML 出力ストリームを変更する JavaScript は動的な HTML コンテンツを作成できます:
今日の日付は次のとおりです: Wed Oct 21 2015 14:43:25 GMT 0800 (中国標準時)
JavaScript では、 document.write() を使用して、コンテンツを HTML 出力ストリームに直接書き込むことができます。
例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

ログイン後にコピー

ランプドキュメントのロードが完了した後は、document.write() を決して使用しないでください。これによりドキュメントが上書きされます。

HTML コンテンツを変更する HTML コンテンツを変更する最も簡単な方法は、innerHTML プロパティを使用することです。
HTML 要素のコンテンツを変更するには、次の構文を使用します:
document.getElementById(id).innerHTML=新しい HTML
この例では、

要素の内容を変更します。例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

ログイン後にコピー

この例では、

要素の内容を変更します。

例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

ログイン後にコピー

例による説明:

上記の HTML ドキュメントには、id="header" の

HTML DOM を使用して id="header" を持つ要素を取得します
JavaScript はこの要素 (innerHTML) のコンテンツを変更します

HTML 属性を変更する

HTML 要素の属性を変更するには、次の構文を使用します:

document.getElementById(id).attribute=new value

ログイン後にコピー

この例では、

要素の src 属性を変更します。例

<!DOCTYPE html>
<html>
<body>

<img  id="image" src="smiley.gif" alt="JavaScriptによるHTML DOMの基本的な操作方法を詳しく解説_基礎知識" >

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

ログイン後にコピー

例による説明:

上記の HTML ドキュメントには、id="image" の