ティラノスクリプトでのJavaScript発展編

JavaScriptの特徴

htmlのidとclass

すべてのhtml要素には、id属性とclass属性を指定できます。
CSSを書いたことのある人なら知っていると思います。CSSでは、<div>などのHTML要素の他、id属性やclass属性を使ってスタイルを適用する要素を指定します。

JavaScriptでDOMを取得するときにも、HTML要素、id属性、class属性などを使います。

jQueryの話

DOM操作の流れ

その１

1. DOMを取得する
2. DOMの要素を変更する

その2

1. DOMを作成する
2. DOMの要素を変更する
3. DOMを別の要素に追加する

<div class="test">
<img id="image" src="image.png" />
</div>

<div>を取得し、取得した<div>に変更をする、というのがその1の例です。

DOMを取得する

↑のhtml内のDOMを取得する例は以下のとおりです。

var elm1 = $("div")　　　　//<div>を取得
var elm2 = $("#image")　　 //id="image"の要素を取得
var elm3 = $(".test")　　　//class="test"の要素を取得
var elm4 = $("div.test")　 //<div>かつclass="test"の要素を取得

CSSを書いたことのある人は、HTML要素、id属性、class属性など、CSSと同じ書き方をしていることに気づくと思います。 「$()」で囲むことで、jQueryでDOMを記述することを宣言します。
「$("HTML要素名")」とすることで、指定したHTML要素を取得します。
「$("#id属性")」とすることで、指定したidの要素を取得します。
「$(".class属性")」とすることで、指定したclassの要素を取得します。

ここで、疑問の浮かんだ方もいると思います。
id属性は、HTML文書内に同じidはひとつしか指定できないけど、HTML要素やclass属性は複数指定できます。

その場合はどうなるかというと、該当する要素がすべて取得されます。
例えば以下のようなHTMLがあります。

<div class="test">
<img src="image.png" />
</div>
<div class="test">
<img src="image2.png" />
</div>

ここで「$(".test")」と記述すると、2つの<div>が両方とも取得され、操作対象となります。

DOMを取得するときは、うっかり変更するつもりのない要素まで取得してしまわないように、指定方法を気をつける必要があります。

DOMの要素を変更する

この説明は正直jQueryのリファレンスを見たほうが早いと思う…

DOMを追加する

DOMを削除する