1. DOM Scripting & jQuery
- First Step -
performed by A.Yonekura
2. DOM Scripting 1
Web 準拠による JavaScript
JavaScript
スクリプト言語
(動作・ふるまい)
Behavior
Content
CSS
プレゼンテーション言語 HTML
( レイアウト・装飾 ) Presentation 構造化言語
(要素・文章)
W3C による「Web 準拠」の概念では、構造化言語の HTML とプレゼンテーション言
語の CSS を役割で分離するよう推奨している。
DOM Scripting & jQuery performed by A.Yonekura
3. DOM Scripting 2
DOM 概念
JavaScript
スクリプト言語
Behavior (動作・ふるまい)
Document
Object
Model HTML
構造化言語
Content (要素・文章)
構造化言語(HTML)をスクリプトやプログラム言語(JavaScript) から利用するため
の仕組み < インターフェイス > を DOM(Document Object Model) と呼ぶ。
DOM Scripting & jQuery performed by A.Yonekura
4. DOM Scripting 3
DOM 概念
JavaScript
スクリプト言語
Behavior (動作・ふるまい)
DOM Scripting
HTML
Content 構造化言語
(要素・文章)
JavaScriptが DOMを利用して HTML+CSSにアクセスすると Web標準に準拠した、機
能の分離が図れる。この方式を DOM Scriptingと呼ぶ。
DOM Scripting & jQuery performed by A.Yonekura
5. DOM Scripting 4
旧式での JavaScript のの記述方法
<title>JavaScript - old type</title>
<script type="text/javascript">
<!--
function imgChg(imageName,i){
if(navigator.appVersion.charAt(0) >= 4 && loadfinish == true){
document.images[imageName].src=preImage[i].src;
}
}
function init(){
preloadImage();
}
//-->
</script>
</head>
<body onLoad="init()">
<a href="#" onMouseOver="imgChg('b2',3)">
<img src="img/button02.gif" name="b2"></a>
</body>
HTMLのコード内に JavaScriptを入れて記述していた為、HTMLソースが煩雑になり
容量や動作が重くなる原因となっていた。
DOM Scripting & jQuery performed by A.Yonekura
7. DOM Scripting 6
DOM ツリー図
body div #container h2 #drink
p a #addMenu
ul #menu li
li
li
li
HTMLの各要素をプログラムで扱う為には、要素をオブジェクトとみなし扱うことにな
る。HTMLの要素を DOMツリーで表すことで構造を把握することができる
DOM Scripting & jQuery performed by A.Yonekura
8. DOM Scripting 7
ノード <node> について
ノードネーム 属性
node name attribute
<h2 title=" メニュー "> コーヒー </h2>
ノード node
ドキュメント上の要素
(オブジェクト)を DOMでは、ノードと呼ぶ。ノードの属性を取
得したり、ノード自体を書き換えたりすることでドキュメントを動的に操作する。
DOM Scripting & jQuery performed by A.Yonekura
9. DOM Scripting 8
テキストノード <text node> について
テキストノード
text node
<h2 title=" メニュー "> コーヒー </h2>
テキストノードの前後にも
<> が隠れて存在していると
考えるとわかりやすい
テキストノードもオブジェクトに含まれるので、ノードが存在する。テキストノード自
体はオブジェクトなので、”コーヒーという文字列を取得するためには nodeValeを使う
DOM Scripting & jQuery performed by A.Yonekura
10. DOM Scripting 9
DOM で取り扱うプロパティ
firstChild 子供ノードの一番目を取得
lastChild 子供ノードの最後を取得 p a #addMenu
childNodes 子供たち(配列で返す)
ul #menu li
parentNode 親ノード
li
nodeValue テキストノードの文字列を取得
li
nodeName ノードの名前(タグ名を)取得
li
DOM Scripting & jQuery performed by A.Yonekura
11. DOM Scripting 10
DOM で取り扱うメソッド
getElementById() id を取得
getElementsByTagName() 同じタグ名の要素を取得
appendChild() 新しいノードを追加する
ul #menu li
removeChild() ノードを削除する
li
createElement() 指定した要素を作る
li
createTextNode() テキストノードを作る
li
DOM Scripting & jQuery performed by A.Yonekura
24. jQuery 4
イベントハンドラ
$( ). イベント名 (function( ){
)}
<script type="text/javascript">
$(function() {
$("a").click(function(){
alert("クリックしました");
});
}); ・<a>タグをクリックしたら、アラートを表示
</script>
DOM Scripting & jQuery performed by A.Yonekura
25. jQuery 5
CSS セレクタ
$("a") a 要素
$("p a") p 要素の子孫の a 要素
$("p.myClass") class 属性
$("p#myId") id 属性
<script type="text/javascript">
$(function() {
$("a#menu").click(function(){
alert("クリックしました");
});
});
</script>
〜省略〜
<a href="#" id="menu">クリック</a>
DOM Scripting & jQuery performed by A.Yonekura
29. DOM Scripting & jQuery
..... to be continued
参考:
「DOM Scripting 標準ガイドブック」
「Web クリエイティブのための DOM Scripting」
DOM Scripting & jQuery performed by A.Yonekura