「プログラム学習をするなら、まずどの言語を覚えたら良い？」と聞かれたら「javascript」と答えている、ユゲタです。
理由は、ブラウザさえあれば、簡単なプログラムを書いて実行して確認をすることが非常に簡単にできるので、環境設定がほとんどいらないという点でおすすめしています。
他にも最近のSPA(SinglePageApplication)などでjavascript言語は必至なため、サーバーサイドプログラムを覚えるよりも先に学習しておかなければ、その後の多言語プログラム修得も楽になる事も考えて、効率の良いエンジニアへの近道になるためですね。
そんなjavascriptのappendChild地獄に悩まされていた頃、"DOMparse()"関数を覚えて便利に使えたので、機能の機能説明と使い方を簡単にレクチャーしたいと思います。
DOMparseの便利どころ
HTMLソース内のエレメントを、createElementして、appendChildやinsertBeforeやinsertAdjucentHTMLを行ってDOMに追加を行う方法だと、
まあまあ深い階層などの時はプログラムが非常に
汚く長くなります。
こんな時に、追加するdom構造を1つの文字列として書いて（または外部テキストファイルを読み込んで）そのまま1度のinsertできれば非常に楽なのにな〜〜〜と思っていたら、それを実現してくれる関数がDOMparse()です。
この命令は、XMLやHTMLなどの構造エレメントをメモリ上のdocumentに格納してくれる関数です。
これまでのプログラムが嘘のようにスッキリさせることができました。
プログラミング方法
HTMLソース内にjavascriptを書いて、テキスト構造を追加しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="a">
<div class="b">
<div class="c">test</div>
</div>
</div>
<script>
var txt = "<span class='d'><span class='e'>:add-text</span></span>";
var parser = new DOMParser();
var doc = parser.parseFromString(txt, "text/html");
var spans = doc.querySelector(".d");
var e = spans.querySelector(".e");
var base = document.querySelector(".a .b .c");
base.appendChild(spans);
</script>
</body>
</html>
ブラウザで実行すると、画面に「test:add-text」と表示されます。
簡単解説
div.a
└ div.b
└ div.c
└ test(string)
上記のhtmlに対して
span.d
└ span.e
└ add-text(string)
この要素が追加されます。
結果の全体ソースは以下のようになっています。
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<body>
<div class="a">
<div class="b">
<div class="c">test<span class="d"><span class="e">:add-text</span></span></div>
</div>
</div>
<script>
var txt = "<span class='d'><span class='e'>:add-text</span></span>";
var parser = new DOMParser();
var spans = parser.parseFromString(txt, "text/html").querySelector(".d");
var e = spans.querySelector(".e");
var base = document.querySelector(".a .b .c");
base.appendChild(spans);
</script>
</body></html>
プログラム解説
var parser = new DOMParser();
まず、パースインスタンスを作成。
var doc = parser.parseFromString(txt, "text/html");
次に追加するHTMLテキストで仮想documenにパースした構造体を作成します。
この時docに入っているのは、documentですが、ブラウザのデバッグコンソールで確認すると、その中身はhtmlタグで構造体が作られている事が確認できます。
ここから、作成した情報はquerySelectorで取り出すと便利ですね。
その昔（IE6ぐらいの時）、iframeを作ってその中のソースコードを使って似たような操作をしたことを思い出しました。
実行環境調査
一昔前は使えなかった事がわかりますが、今現在はどのブラウザでも使える状態です。安心して使用できますね。
この機能のもう一つ便利な点としては、"insertAdjucentHTML"を使っても似たような事ができると考えられますが、"parser.parseFromString"でdocument構造を作成した状態で、仮想エレメントの検索や構造変更（追加や削除や入れ替えなど）がその場で出来るという点です。
通常の場合は、本番DOMにappendしてからコントロールするのに対して、appendする前に調整ができるので、非常に便利に使えます。
やってみるとわかりますが、ソースコードも非常に短くすむのでオススメです。
改めて、IE6~8はオワコンであることを認識できますが、B2BWEBサービスの場合に、まだまだこのバージョンが切れない理由もあるというのが怖いですねえ。
0 件のコメント:
コメントを投稿