【プログラミング 28時間目】ID名から要素を取得するなど、JavasriptによるHTMLの操作について


スポンサーリンク


「やさしいWebアプリプログラミング」
この"やさしい"説明は本当に安心する。安心して勉強できる。


DocumentオブジェクトのgetElementByID()メソッドを使えば、ID名から要素を取得できる。

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>要素の取得</title>
<script type="text/javascript">
function search(){
	var e = document.getElementById("heading");
	var str = e.innerHTML;
	window.alert(str);
}
</script>
</head>
<body>
<h1 id="heading">TEST</h1>
<input type="button" value="要素取得" onClick="search()"/>
</body>
</html>

■タグ名から要素のリストを取得する。
要素のリストを取得。
配列の先頭の要素を指定することで、該当する先頭の要素の下にあるテキストを取得する。

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>要素リストを取得</title>
<script type="text/javascript">
function search() {
	var list = document.getElementsByTagName("h1");
	var str = list[0].innerHTML;
	window.alert(str);
}
</script>
</head>
<body>
<h1>TEST</h1>
<input type="button" value="見出しを調べる" onClick="search()"/>
</body>
</html>

■要素内のHTMLを操作する

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>要素の操作</title>
<script type="text/javascript">
function change() {
	var list = document.getElementsByTagName("h1");
	list[0].innerHTML = "変更後";
}
</script>
</head>
<body>
<h1>変更前</h1>
<input type="button" value="変更" onClick="change()"/>
</body>
</html>