DOM

indexに戻る JavaScriptの基本 用語解説 使えるJavaScript

ダイアログボックス ウィンドウ イベント ロールオーバー 演算子 配列 日付

正規表現 DOM 関数 数学関数（Math） 画像 フォーム1 フォーム2 フォーム3

【サンプル】カウントダウン 【サンプル】カウントダウン実践 【サンプル】タグ（文章の）の入れ替え 【サンプル】カルーセルスライダー 【サンプル】フリックスライダー 【サンプル】拡大写真ライダー

jQueryの基本 擬似クラス CSSの制御 jQueryサンプル

DOMとは

Document Object Modelドキュメント　オブジェクト　モデル

HTMLやXMLの文書を操作する為の方法。HTMLからの情報を取り出せる。→操作する。

各エレメントの事をノードと言い、呼び名は以下の通り。

たとえば特定のタグのスタイル（背景、枠線など）を変更したり、テキストやＵＲＬ情報を取得したりできる。

ノード

要素ノード	HTMLタグを表します。DOMでは、HTMLタグのことを「要素」と呼びます。
属性ノード	タグ内に記述されている属性を表します。Aタグのhref属性やIMGタグのsrc属性などが該当します。
テキストノード	タグではない文字の部分を表します。
ドキュメントノード	HTML文書全体を表します。JavaScriptでは、documentオブジェクトがドキュメントノードを参照します。

プロパティ

innerHTML	テキストの内容や参照の設定を行う
childNodes[参照番号]	あるノードのすべての子ノード
firstChild	あるオブジェクトの最初の子ノードを参照する
lastChild	あるオブジェクトの最後の子ノードを参照する
parentNode	ある子から見た親ノードを参照する

メソッド　document.メソッドで使う

getElementById()	特定のエレメントを一つ取り出す。（）の中にID名を入れる。
getElementsByTagName()	引数で指定したタグのエレメントを配列として、すべて取り出して返す。

<ul id="domUL">
	<li>おはよう</li>
	<li>こんにちわ</li>
	<li>こんばんわ</li>
</ul>

<script type="text/javascript">
	var name=document.getElementById("domUL").firstChild.firstChild.nodeValue;
	document.write(name);
</script>
---------------------------------------------------------------
結果：おはよう

---------------------------------------------------------------
---------------------------------------------------------------

<script type="text/javascript">
	var name=document.getElementById("domUL").childNodes.length;
	document.write(name);
</script>
---------------------------------------------------------------
結果：3

firstChildを2つつける。childNodes.lengthで何個子ノードがあるかが分かる。

使い方

フォームで間違っていたらコメントを出す

＜＜JavaScript＞＞
<script type="text/javascript">
	function check(){
		a = mainF.My.value; //テキストフォームの文字列を取得

		if(a=="gg"){ //"gg"中身が文字列なので、""を付ける
			document.getElementById("chec").innerHTML="必須項目です";
			//getElementByIdで変更したいノードを取得→innerHTML=で変更
		}else{
			alert(a);
		}
	}
</script>
---------------------------------------------------------------
＜＜HTML＞＞
<form name="mainF">
	<input type="text" name="My" /><span id="chec"></span><br />
	<input type="button" value="確認" onClick="check()" />
</form>

innerHTMLについて

要素内のすべての内容をHTML形式で持っている。その為、タグをそのまま表示させる事が出来る。

＜＜JavaScript＞＞
<script type="text/javascript">
	var TEXT1="こんなふううに表示されます。タグ事いけます！";
	var TEXT2="ここに解説がでます"

	function Change(){
		if(document.all){document.all("InHTML3").InnerHTML=TEXT1}
		if(document.getElementById){document.getElementById("InHTML3").innerHTML=TEXT1}
	}
	function Change2(){
		if(document.all){document.all("InHTML3").InnerHTML=TEXT2}
		if(document.getElementById){document.getElementById("InHTML3").innerHTML=TEXT2}
	}
</script>
---------------------------------------------------------------
＜＜HTML＞＞
<div id="InHTML1" onClick="Change()">
	ここをクリックして！！<br />
</div>

<div id="InHTML2" onClick="Change2()">
	元に戻ります<br />
</div>

<div id="InHTML3">
	必見！解説はコチラ<br />
</div>

※リンクで動かす場合<a href="JavaScript:Change()">クリックここをクリックして！！</a>