Java例付きスクリプト DOM チュートリアル

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

DOMとは何ですか Javaスクリプト？

Javaスクリプトは、ドキュメント オブジェクト モデル (DOM) を利用して、Web ページ内のすべての要素にアクセスできます。実際、Web ブラウザーは、ページが読み込まれるときに Web ページの DOM を作成します。DOM モデルは、次のようなオブジェクトのツリーとして作成されます。

DOM内 Javaスクリプト

DOMとイベントの使い方

DOMを使用すると、 Javaスクリプトは複数のタスクを実行できます。新しい要素と属性を作成したり、既存の要素と属性を変更したり、既存の要素と属性を削除したりすることもできます。 Javaスクリプト 既存のイベントに反応したり、ページ内に新しいイベントを作成したりすることもできます。

getElementById、innerHTML の例

  1. getElementById: ID が設定されている要素および属性にアクセスします。
  2. innerHTML: 要素のコンテンツにアクセスします。

この例を自分で試してみてください。

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

getElementsByTagName の例

getElementsByTagName: タグ名を使用して要素と属性にアクセスします。 このメソッドは、 配列 同じタグ名を持つすべてのアイテムの。

この例を自分で試してみてください。

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

イベントハンドラの例

  1. createElement: 新しい要素を作成するには
  2. RemoveChild: 要素を削除します
  3. あなたは追加することができます イベントハンドラー 次のような特定の要素に:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

この例を自分で試してみてください。

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>

よろしければ：