html要素へのアクセス（２）-html要素へのアクセスのいろいろ

htmlタグ，dodyタグ，headタグ要素へのアクセス

htmlタグ，dodyタグ，headタグ要素へのアクセスは以下のようになる。

htmlタグ
document.getElementsByTagName("html")[0]
document.lastChild
dodyタグ
document.body
headタグ
document.getElementsByTagName("head")[0]

htmlタグを取得するには、getElementXXXメソッドを使うのが常套手段であるが、 dodyタグに対しては特別にdocument.bodyでアクセスできる。

ところが、headタグやhtmlタグではdocument.headやdocument.htmlを使う事はできない。

headタグを取得するにはやはりgetElementsByTagNameメソッドを使って document.getElementsByTagName("head")[0]とする。

では、htmlドキュメントのトップ要素であるhtmlタグを取得するにはどうすれば良いだろう。

document.getElementsByTagName("html")[0] または document.lastChild を使う。

document.firstChildでも良さそうだがhtmlタグの前にDOCTYPE宣言があるとDOCTYPE要素（？）が firstChildになってしまうのでこれは使えない。

titleタグに対してはdocument.titleプロパティが存在するが、これは一見titleノードを指していると勘違いしやすいがこれはtitle文字列を指しているんので間違いのないように。

documentのリストを返すプロパティ

documentオブジェクトには、以下のようにhtml要素の特定のタグのリストを返すプロパティが存在する。

anchors
ドキュメント中のname属性がある全aタグのリストを返す。
applets
ドキュメント中の全appletタグのリストを返す。
forms
ドキュメント中の全formタグのリストを返す。
images
ドキュメント中の全imgタグのリストを返す。
links
ドキュメント中のhref属性がある全aタグのリストを返す。

サンプル１-documentのリストを返すプロパティの例

name属性を使ってform要素へアクセス

name属性は使わずに換わりにid属性を使った方が良いとされているが、name属性を使うと便利な事もある。

form要素に対しては、特別にname属性の値を使ってアクセスする事ができる。

以下に、その例を示す。

サンプル２-name属性を使ったform要素へのアクセスの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>name属性を使ったform要素へアクセスの例</title>
<script type="text/javascript">
	window.onload = function() {
		var select=document.form1.select;
		document.form1.button.onclick=function(){
			alert(select.options[select.selectedIndex].innerHTML
				+"が選択されています。");
			return false;
		}
	};
</script>
</head>
<body>
<h1>name属性を使ったform要素へアクセスの例</h1>
<hr />
<form name="form1">
	form1<br />
	<select name="select">
		<option selected="selected">anchors</option>
		<option>applets</option>
		<option>forms</option>
		<option>images</option>
		<option>links</option>
	</select>
	<button name="button">選択されたoption内の文字列を表示</button>
</form>
</body>
</html>

id属性と違って、name属性は複数の要素に同じ値を指定できる。

この場合に、name属性を使ってform要素へアクセスすると、同じname属性の要素のリストが返される。

サンプル３-複数の要素に対して、同じname属性を指定した場合のform要素へアクセスの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>name属性を使ったform要素へアクセスの例</title>
<script type="text/javascript">
	window.onload = function() {
		document.form2.button.onclick=function(){
			var inputs=document.form2.aaa;
			var msg="";
			for(var i=0;i<inputs.length;i++){
				msg+=(inputs[i].value+"\n");
			}
			alert(msg);
			return false;
		}
	};
</script>
</head>
<body>
<h1>同じname属性を持った要素が複数存在する場合の例</h1>
<hr />
<form name="form2">
	form2<br />
	<input name="aaa" type="text" value="aaa[0]"/>
	<input name="aaa" type="text" value="aaa[1]"/>
	<button name="button">aaaの入力値を表示</button>
</form>
</body>
</html>

form要素にはtypeプロパティとformプロパティが存在する。

typeプロパティはform要素の種類を、formプロパティはform要素の親となるformを示す。

サンプル４-typeプロパティとformプロパティの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form要素のtypeプロパティとtypeプロパティの例</title>
<script type="text/javascript">
	window.onload = function() {
		document.form3.button.onclick=function(){
			alert("form3.button type="+this.type+",form.name="+this.form.name);
			return false;
		}
	};
</script>
</head>
<body>
<h1>form要素のtypeプロパティとtypeプロパティの例</h1>
<hr />
<form name="form3">
	form3<br />
	<button name="button">form3.buttonのtypeプロパティと親となるformのname属性を表示</button>
</form>
</body>
</html>

formと同様、imgタグとappletタグも、name属性を使ってアクセスする事ができる。

サンプル５-name属性を使ってform要素へアクセスのサンプルページ

JavaScriptの参考書 ／ Ajaxの参考書 ／ HTMLの参考書 ／ CSSの参考書

Amazon.co.jp ウィジェット