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