Created
February 18, 2013 07:32
-
-
Save gooocho/4975671 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
■HTML風文字列 | |
"<ul><li><ul><li></li><li>" | |
といった文字列. | |
"<"と">"が多いなー、という風に認識している程度で、どこまでが1番目のul要素なのかはまだわかりません. | |
■DOM Tree | |
HTML風文字列を | |
・省略された閉じタグの補完 | |
・不正なHTMLの修正 | |
・コメントの解釈 | |
など、HTMLの仕様に従っていろいろな処理をしつつ | |
・HTML風文字列 → 要素 への分解 | |
・親要素/子要素 の関連付け | |
を行います. | |
(こんな感じ) | |
---------------- | |
<ul> | |
└<li> | |
└(空テキスト) | |
<ul> | |
├<li> | |
│└(空テキスト) | |
└<li> | |
└(空テキスト) | |
---------------- | |
■DOM API | |
DOM Treeから値を取得したり、DOM Treeを変化させるのに使う関数です. | |
DOM APIはいろいろなプログラミング言語で実装されています.(python, Javaなど) | |
ブラウザにはJavaScript用のDOM APIが用意されています. | |
画像のプリロードをするときに使うDOM API | |
・createElement | |
・appendChild | |
の動作を見てみます. | |
----------------------------- | |
#window | |
└#document | |
├<head> | |
└<body> | |
├<div> | |
└<p> | |
----------------------------- | |
のようなDOM Treeに対して | |
var myImgElement = document.createElement('img'); | |
を実行すると、 | |
----------------------------- | |
#window myImgElement | |
└#document └<img> | |
├<head> | |
└<body> | |
├<div> | |
└<p> | |
----------------------------- | |
のように、離れたところに別の木ができます. | |
<img>要素が作られたので、ブラウザは画像のロードを開始します. | |
ですが、画面に表示されるのは #window の下にあるものだけなので、myImgElementは表示されません. | |
さらに | |
document.getElementsByTagName('p')[0].appendChild(myImgElement); | |
を実行すると、 | |
----------------------------- | |
#window | |
└#document | |
├<head> | |
└<body> | |
├<div> | |
└<p> | |
└<img> | |
----------------------------- | |
#window の下に<img>が配置され、画面に画像が表示されます. | |
画像の読み込みは完了しているので、描画はただちに完了します. | |
■jQuery | |
今回の例でもわかるとおり、DOM APIは長く、記述が面倒です. | |
jQueryを使うと短く記述することができるようになります. | |
・DOM API | |
document.getElementsByTagName('p')[0].appendChild(document.createElement('img')); | |
・jQuery | |
$('p').eq(0).append($('<img>')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment