getElementByIdを使って要素内の文字や画像を変更する

2014/07/04
- JavaScript

jQueryを使わなくても、JavaScriptのDOMだけで文字や画像を変更したりできます。

さぁ、キミはDOMのジェットストリームアタックをかわすことができるか！？（すみません忘れてくださいw）

DOMについて

　DOMとは、Document Object Modelの略でHTML文書を扱うための仕組みのことです。DOMを使うことで、文書内のある部分を書き換えたりすることができます。

　詳しい説明は省略します（爆）が、「JavaScript超初心者によるJavaScript入門講座」というサイトが分かりやすいかも。ということで、リンクして説明に代えさせて頂きます。手抜き（汗）

JavaScript超初心者によるJavaScript入門講座

マジ、初心者でもDOMが使えるのか！？（笑）

まずはサンプル

文字や画像にマウスを重ねてみてください。

WEB-LABO

HTML&CSS

上のサンプルのHTMLとCSSです。
CSSは４つとも同一のものを適用しています。

<div id="txt1" onmouseover="txtChange1()">WEB-LABO<img src="apple.jpg"></div>

<div id="txt2" onmouseover="txtChange2()">WEB-LABO<img src="apple.jpg"></div>

<div id="img1" onmouseover="imgChange()">WEB-LABO<img src="apple.jpg" id="icon"></div>

<div id="img2"><img src="apple.jpg" onmouseover="ro(this,'wifi.jpg')"  onmouseout="ro(this,'apple.jpg')"></div>

※画像はファイル名だけにしています。

４つともやり方が少しずつ違うんですが、その違いは次のSCRIPTのところで説明します。

<style type="text/css">
	#txt1,#txt2,#img1,#img2{
		width: 300px;
		margin: 50px 0px;
		font-weight: bold;
		font-size: 36px;
		color:#ccc;
		font-family: impact;
		text-align:center;
	}
</style>

JavaScript

1つ目と2つ目がinnerHTMLで、3つ目と4つ目がsrcを使ってます。

<script type="text/javascript">
	function txtChange1(){
		document.getElementById("txt1").innerHTML = "触っちゃダメYO！";
		document.getElementById("txt1").style.color = "#ff0000";
	}

	function txtChange2(){
		document.getElementById("txt2").innerHTML = "触っちゃダメYO！&lt;img src='apple.jpg'&gt;";
		document.getElementById("txt2").style.color = "#ff0000";
	}

	function imgChange(){
		document.getElementById("icon").src = "wifi.jpg";
	}

	function ro(img2,file){
		img2.src = file;
	}
</script>

1つ目と2つ目は、getElementByIdとinnerHTMLを使っています。getElementByIdを使って要素を指定し、innerHTMLで要素の内容を書き換えています。

txt1に対しては、
innerHTML = “触っちゃダメYO！”
としているので、画像が消えて文字だけが変わりました。
おまけで文字の色も変えました。

txt2に対しては、
innerHTML = “触っちゃダメYO！<img src=’apple.jpg’>”
としているので、見かけ上は文字だけ変わったように見えますが、文字と一緒にimgタグを代入しているだけです。

3つ目は、imgタグ自体にidをつけてgetElementByIdで要素を指定し、srcで画像のソースを変更しています。なので、文字の内容は変化せず、画像だけが入れ替わります。

getElementById(“icon”).src = “wifi.jpg”

4つ目は、実際にメニューのロールオーバなどを作る際に、画像ごとに関数にするのはイケてないので切り替える画像を指定して関数を呼び出すようにしたものです。

HTML側のイベントで関数を呼び出す際に、画像を切り替える対象のオブジェクトと切り替える画像を引数で渡します。

ro( オブジェクト, 切り替える画像 )

function ro(img2,file){
　　img2.src = file;
}

onmousoverとonmouseoutで切り替える画像に違うファイルを指定しているので、マウスを乗せたときと離した時で画像が変わります。

あれ、途中から予定変更して４つになっちゃったからジェットストリームアタックじゃなくなっちゃったよ（笑）

まぁ、コレを踏み台にしていけ！

DOMについて

まずはサンプル

HTML&CSS

JavaScript

関連記事