サンプル1-getElementXXXメソッドによる特定のhtml要素へのアクセスの例


div0
div1
div2
div3span0span1

記事へ戻る --- 愚鈍人ホーム

htmlソース

<!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>サンプル1-getElementXXXメソッドによる特定のhtml要素へのアクセスの例</title>
<script type="text/javascript">
	window.onload = function(){
		var ie=document.all;

	    document.getElementsByName('xxx')[0].onclick=function(){
			var msg="";
			msg+=("document.getElementsByTagName('div')[1].innerHTML="
					+document.getElementsByTagName('div')[1].innerHTML+"\n");
			var elementNode=document.getElementById('xxx');
			msg+=("elementNode.getElementsByTagName('xxx')[0].innerHTML="
					+elementNode.getElementsByTagName('span')[1].innerHTML+"\n");
			if (ie) {
				msg+=("IEではdocument.getElementsByClassNameメソッドはサポートされていません。"+"\n");
			} else {
				msg+=("document.getElementsByClassName('xxx')[0].innerHTML="
						+document.getElementsByClassName('xxx')[0].innerHTML+"\n");
				msg+=("elementNode.getElementsByClassName('xxx')[0].innerHTML="
						+elementNode.getElementsByClassName('xxx')[0].innerHTML+"\n");
			}
			alert(msg);
		};
		
	};
</script>
</head>
<body>
<h1>サンプル1-getElementXXXメソッドによる特定のhtml要素へのアクセスの例</h1>
<hr />
<div>div0<button name="xxx">Click Me!</button></div>
<div>div1</div>
<div class="xxx">div2</div>
<div id="xxx">div3<span class="xxx">span0</span><span>span1</span></div>
</body>
</html>