« 部屋の大掃除をしました。 | ホーム | count()関数、rand()関数｜最近使ったPHPのメモ001 »
2011年6月11日
DOM関連のメモ｜Head Rush Ajax003
DOMってhtmlばかりを書き書きしてると、直感的に理解した気になってしまうのですが、改めてメモしておきます。
DOMツリーへのアクセス
<div id="hakashun">例えば、上記のようなhtml（もちろんタグ内です。）がある場合で考えます。
<p>Starbucks Coffee</p>
</div><!--/#hakashun-->
ある特定のid属性がついたエレメントは、
var hakashun = document.getElementById("hakashun");
で取得します。2. タグ名でエレメントを特定する
<div id="hakashun">特定のタグ名のエレメントを取得したい場合は、
<p>Starbucks Coffee</p>
</div><!--/#hakashun-->
var pTag = document.getElementsByTagName("p");
で取得する。
3. <html>タグを取得する
HTMLドキュメントのルートエレメント（<html>）を取得したい場合は、
var htmlElement = document.documentElement;
を用いる。これはあんまり使わなそう（と思うのは未熟だからでしょうか・・・）
4.新しいノードを作成する
<p>Starbucks Coffee</p>例えば、上記のようなエレメントを作成するときは、
//<p>タグを作る（中身はからっぽ） var pDiv = document.createElement("p")); //<p>タグに入るテキストを作る var starbucks = document.createTextNode("Starbucks Coffee")); //<p>タグに作成したテキストを入れる pDiv.appendChild(starbucks);
こうして、色々勉強している訳だが、本当に知らなかったことばかり。
Ageの活動が終わって、体系的にやっと勉強できているんだけど、こうした時間も大事にしなくてはと思います。
最後にDOMツリーの移動について図を貼り付けておきます。
DOM操作はjQueryもあることですし、現実的にこれらを使う機会が多いとは限りませんが、何事も知っているにこしたことはないでしょう。
日々精進ですね！