勉強:JavaScriptのDOMに挑戦-その1 | 風標(old)
Category: スポンサー広告 | edit ]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Category: IT関連 ≫WEB関係 | edit ]
いゃあ、ちょいっとここのブログでやりたいことを発見。
内容はまだ内緒。
ですが、それをやるには自分のレベルを上げなきゃいかんし。
000612.jpg
それもJavaScript。
めんどくさい系のプログラミングだと思っているんですけど。
なにがめんどくさいかって、
どんな命令があるんだかさっぱり訳わかんねーよ。
という最初の入り口ですよね。
あ、どんなプログラミングも同じです。。。はい。。。

ただ、JavaScriptに関しては、
昔、どんどん衰退してくだろうっと思ってたところが
ここまで拡張されて使えるようになってるところが驚きで。
どんどん殖え肥えていってるプログラミング言語のようでして。
色々覚えるの大変じゃぁあああTT

実際Web系なんて、ここまでインタラクティブになるなんて
思わなかったもんな。。。

って前置き、長げぇーなzzz

<広告>


さて、やりたいことを叶えるためには
DOM(Document Object Model)というものを
扱わなきゃいけないらしいのです。。。

やったことをすぐ忘れてしまうチキン頭なので、
忘備録的に以下にまとめます。



・getElementsByTagName
・getElementById
この2つのメソッドからどういうデータが取得できるのか
確認用に以下テスト用ファイルを作成。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>JavaScript動作テスト</title>
</head>
<body>

<a href="http://www.yahoo.co.jp/">1つめ</a><br>
<a href="http://www.google.co.jp/">2つめ</a><br>
<a href="http://kazajirushi.blog81.fc2.com/">3つめ</a><br>

<div id="color">
<ul type="disc">
<li>青</li>
<li>赤</li>
<li>黄色</li>
</ul>
</div>

<hr>

<script language="JavaScript" type="text/javascript">
<!--
var elem1 = document.getElementsByTagName("a"); //③
var max = elem1.length; //①
var data1;
var data2;

document.write("aタグの数は・・・" + max + "<br>");

//②
for(var i = 0; i < max; i++){
data1 = elem1[i].innerHTML; //④
data2 = elem1[i].getAttribute("href"); //⑤
document.write(data1 + ":");
document.write(data2 + "<br>");
}

var elem2 = document.getElementById("color"); //⑥
var data3;

data3 = elem2.innerHTML; //⑦
document.write(data3);
// -->
</script>

</body>
</html>

クリックすると別タブで開いて実行するよ・・・javascripttest1.html

getElementsByTagNameメソッドは、
タグ名で指定したものを扱うことができます。
帰ってくる値がcollectionなので、配列より値を取得する必要があります。
すでに対象の個数がわかっていて個数が少ないHTMLやXMLなら
手動で配列から処理すればいいのですが、
それ以外の動的なHTMLやXMLを対象にする場合、
まず配列の個数をlengthで求めて・・・①
for文で廻して値を取得します・・・②

ここでは、getElementsByTagNameメソッドにて<a>を指定し・・・③
タグの間のテキストをinnerHTMLで・・・④
<a>タグのherf属性の値をgetAttributeで・・・⑤
取得してます。

getElementByIdメソッドは、id指定されたタグについて扱うことができます。
idというものはclassと違って「1つのHTMLページで1つしか存在できない」
ものなので、必ず戻り値はcollectionではないstring型となります。

ここの例では、
getElementByIdメソッドでid="color"のタグを見つけ出し・・・⑥
これのタグの中身をinnerHTMLで・・・⑦
取得します。
この結果は、<div id="color">から</div>の間の、

<ul type="disc">
<li>青</li>
<li>赤</li>
<li>黄色</li>
</ul>

をごっそり取り出しています。
なので、document.writeで吐き出すと、
そのままHTMLが解釈されるため、上のHTMLと同じような形で表示がされます。



jQueryって何っ?て興味があったので、↓の本を買ってあるんだけど、
出番はまだまだ先のようです。。。
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。