DOM Scripting

授業

DOM(Document Object Model) Scripting

DOMによる要素の指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMで文字色を設定</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
	<h1 id="myid">DOMによる要素の指定</h1>
        <script>
	document.getElementById('myid').style.color = '#ff0000';//文字色の指定
	document.getElementById('myid').style.backgroundColor = '#ffffff';//背景色の指定
        document.getElementById('myid').style.fontSize = '18px';
	</script>
</body>
</html>
特定のイベントに関連づける

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
p {
	cursor: pointer;
}
body {
	width: 100px;
	margin: 0 auto;
}
</style>
</head>
<body>
	<p id="myId">テスト</p>
  <script>
	function myidEvent() {
		alert('押されました');
	}
	document.getElementById('myId').onclick = myidEvent;
	</script>
</body>
</html>
ページが読み込まれた際に命令が実行されるようにする

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部JSファイルに記述する</title>
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
p {
	cursor: pointer;
}
body {
	width: 100px;
	margin: 0 auto;
}
</style>
</head>
<body>
	<script src="dom.js"></script>
  <p id="myId">テスト</p>
</body>
</html>

外部JSファイル

window.onload = function() {
	document.getElementById('myId').onclick = myidEvent;
}
function myidEvent() {
		alert('押されました');
	}
変数を使い複数のスタイルをまとめる
  • 一つ一つ記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>一つ一つ記述</title>
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
  <script>
	document.getElementById('myId').style.color = '#ff0000';
	document.getElementById('myId').style.backgroundColor = '#ffffff';
	document.getElementById('myid').style.width = '300px';
	document.getElementById('myId').style.height = '100px';
  </script>
</body>
</html>
  • 変数を使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数を使う</title>
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
  <script>
  　　myElemnet = document.getElementbyId('myId');//変数の定義
	myElement.style.color = '#ff0000';
  　　myElement.style.bsckgroundColor = '#ffffff';
	myElement.style.width = '300px';
	myElement.style.height = '100px';
  </script>
</body>
</html>
  • さらにまとめる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>さらにまとめる</title>
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
  <script>
  　　myStyle = document.getElementbyId('myId').style;//変数の定義
	my.style.color = '#ff0000';
  　　my.style.bsckgroundColor = '#ffffff';
	my.style.width = '300px';
	my.style.height = '100px';
  </script>
</body>
</html>
  • 以下のように簡略化も可能
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>以下のように簡略化も可能</title>
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
  <script>
  　　myHeader = document.getElementbyId('Header').style;
	myFooter = document.getElementbyId('Footer').style;
	myParam = '800px';
	myHeader.width = myParam;
	myFooter.width = myParam;
  </script>
</body>
</html>