JavaScriptで何かを作っていると，Webサイトの内容に応じて処理を振り分けたいと思うことがあります．静的なサイトが対象であれば，サイトを作ってる人は当然，サイトの内容を理解しているわけなので，そのサイトに最適化したコードを書けばよいわけなんですが，ブログだとかCMSだとか，動的に生成されるサイトの場合，どうしましょうか．
何らかの機能を追加したいと思っても，コードを書いている段階では，サイトとして何が表示されるかわかりません．そこで，なんとかしてサイトに表示されてる内容を取得できないかと考えてみます．
まずはじめに，Webサイトとは何なのかと言うところから．
ブラウザ上で右クリックするなり，メニューから「ソースの表示」をすればわかると思うけど，Webサイトって言うのは，HTMLって言う言語で記述されています．
HTMLって言う言語は，<body>とか<p>とか言う，タグって言うもんで構成されているんだけど，このタグって言うものは，ただ適当に並んでいるわけではなくて，<html>タグの中に，<head>や<body>があって，<body>の中に，<div>や<p>があって…，その中にはまた他のタグがある．と言うような構造になっているんですが，これって実は，木のような構造で表現することができます．
こんなかんじ．
で，本題の「現在表示しているWebページの内容をJavaScript側で知りたいとき，どうすれば良いか？」なんですが，この木をたどってやれば，表示されてる内容が見えてくるはずです．じゃぁ，どうやってたどるのか？ちなみに今回は，jQueryを使ってたどってみました．jQueryを使わなくてもできると思うし，たぶん，他にも色々と方法はあると思います．
まず，jQueryでDOMオブジェクトを取得するときには，どうするのかなんですが，
$()
っていう書き方をします．非常に簡単です．
$("html")
って書けば，最上位のhtmlタグが取得出来ちゃいます．で，htmlタグがどんな子要素を持っているか確認するためには，
$("html").children();
と書きます．ただし，こうするとhtmlタグの子要素を全て取得しちゃう（上記の図だと，headとbody）ので，":first-child"と言う引数を渡してあげます．
$("html").children(":first-child");
これで，htmlタグの，最初の子要素だけを取得することができます．ただ，子要素ばっかり追いかけててもダメなので，next()っていう関数を使ってみます．
$("head").next();
こんな感じで，headタグに対して，next()を使ってみると，上記の図ではbodyタグを取得することができます．
と，いうわけで，children()とnext()を使ってやれば，htmlの木構造をたどることができるようになります．上記の物をまとめるとこんな感じ．
ちなみに，このソースではfirebugを使ってデータを出力するようになってるんで，興味のある人はこの機会にインストールしてみると良いかも知れません．
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function Tansaku( dom, level ){
console.log(level + ":" + dom[0].tagName)
// 子要素確認
var ChildNode = dom.children(":first-child");
if(ChildNode.length > 0){
Tansaku(ChildNode,level+1);
}
// 兄弟要素確認
var NextNode = dom.next();
if(NextNode.length > 0){
Tansaku(NextNode,level);
}
}
$(document).ready(function(){
Tansaku($("html"),0);
}
)
</script>
</head>
<body>
<div>
<p>
<span>
XXXX
</span>
</p>
</div>
</body>
</html>
これを実行することで，DOMを解析することができるように．
