flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScriptでDOMを操作するとき$セレクタ(jQuery)の利用も便利

DOMのもうひとつの見方

JavaScriptにはDOMの概念でhtmlのツリー構造に当たる隅々の要素までアクセス出来る仕組みがあります。用いられる書き方として

Sample1

 document.getElementById("id名"); //値
document.getElementsByTagName("タグ名"); //配列
document.getElementsByName("name名"); //配列
document.getElementsByClassName("class名"); //配列

主に代表的に使われる要素の取り出しとして容易されているものですが、比較的に記述が長い上にid以外は配列で取り出さなければならないという煩わしさがあります。

基本的にclass名やタグ名の全部の要素を取り出して値等を変更するにはfor文でループさせれば良いわけですがこれも煩わしさの一つとなります。

Sample2

 for( i=0 ; i < element.length ; i++){

document.getElementsByTagName("h1")[i].style.color = "#F00";
//h1要素の文字を全て赤字にする

}

そこで使えるのが$セレクタです。

基本的に$セレクタjQueryで頻繁に出てくるというか、$セレクタで動くのがjQueryですので当たり前と言えば当たり前ですが、これをJavaScriptのDOMに結びつけると比較的容易に要素を操作することが出来ます。

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/JavaScript"
></script> //jQueryURL


<script type="text/javascript">
$(function() {
$('.test').append("何か"); //要素の追加
});
</script>

DOMの操作で要素の追加というものがありますが、jQueryの$セレクタを使えば容易に行うことが出来ます。

基本的にこのソースの場合class名がtestである要素全てに効果を適応させる事ができます。

これにより無駄にforでソースを回す必要もなくなります。

最初の無名関数を$セレクタで囲ってあるのはJavaScriptでいうwindow.onload = function(){}と同じ意味合いです。

ロードをし終えた後にスクリプトを読み込むので先にスクリプトを読み込んでしまってgetElementById is defindみたいなバグを抑える事も出来ます。

jQueryはただライブラリとしての実用だけでなく、JavaScriptの構文を容易にする面もありますので使ってみると良いかもしれません。