gooocho/gist:4975671

## gistfile1.txt
■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>'));
	■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>'));