HOME

{ ソースコードハイライト表示 ( β : 02 ) : javascript }

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

前回作成した、 javascript, css, html のソースコードをハイライト表示するプログラムの修正です。
前前作 → { javascript,css,html ソースコードハイライト表示 }
前作 → { ソースコードのハイライト表示 ( β ) : javascript }
DOM 要素の一括作成 → { 配列を利用した DOM 要素一括作成 : javascript }
createHtmlText 関数 → { 配列を利用した HTML テキスト(タグ)一括作成 : javascript }
HtmlText クラス → { HTML テキスト(タグ)一括作成 : HtmlText クラス }

ソースコードをハイライト表示するプログラム作成にあたり、
要素を javascript で書き出す必要がありました。
最初は、一つ一つ要素作成、属性設定の手順で書き出していたのですが、
一括して書き出せないかと、色々試して、配列を利用して、
DOM 要素を一括作成する createElement 関数を作成しました。
この関数を雛形とて、変更を加え、 HTML テキストとして出力するようにしたのが、
createHtmlText 関数と HtmlText クラス です。
ソースコードのハイライト表示プログラムは、DOM 要素を作成して、追加していくプログラムでした。
その DOM 要素追加の処理を HtmlText クラスに置き換えてみた所、
この HtmlText クラスでは、 親要素への子要素追加は出来たのですが、
その子要素への要素追加が出来ないことが分かりました。
なので、コードを追加して、子要素への子要素追加もできるようにしました。

その後、この HtmlText クラス を幾つかのプログラムで試したのですが、
任意のタイミングでのテキスト追加が出来ないことが分かりました。
また、追加になりますが、 text(); メソッド を追加しました。
使用方法下にあります。

var result = new HtmlText ( ["div","class","d0","テキスト1","=>text",["br"],"=>child","テキスト2","=>text"] ).get(); //任意のタイミングでの要素追加と取得 //親要素作成と親への子要素追加は tag.set(); メソッド var tag = new HtmlText();// HtmlTextインスタンス生成 tag.set('div','class','d0');// 親要素作成 tag.add(['span','class','s0']);// 子要素(1)追加 子要素追加は配列 tag.add(['span','class','s1']);// 子要素(2)追加 子要素追加は配列 var result = tag.get();//html タグ取得 //出力結果 <div class='d0'> <span class='s0'></span> <span class='s1'></span> </div> //子要素への要素追加は tag.add(); メソッド var tag = new HtmlText();// HtmlTextインスタンス生成 tag.set('div','class','d0');// 親要素作成 var child = tag.add(['span','class','s0']);// 子要素作成と、 子要素 child 配列取得 tag.add(child, ['span','class','s1']);// 子要素への要素追加, 第一引数に追加する親要素配列, 第二引数に子要素配列 tag.add(child, ['span','class','s2','className : s2 テキスト','=>text']);// 子要素への要素追加 var result = tag.get();//html タグ取得 //出力結果 <div class='d0'> <span class='s0'> <span class='s1'></span> <span class='s2'>className : s2 テキスト</span> </span> </div> //子要素への子要素追加は tag.add(); メソッド var tag = new HtmlText();// HtmlTextインスタンス生成 tag.set('div','class','d0');// 親要素作成 var child = tag.add(['span','class','s0']);// 子要素作成と、 子要素 child 配列取得 var ch0 = tag.add(child, ['span','class','s1']);// 子要素への要素追加, 第一引数に追加する親要素配列, 第二引数に子要素配列 tag.add(ch0, ['span','class','s2','className : s2 テキスト','=>text']);// 子要素へ子要素追加 var result = tag.get();//html タグ取得 //出力結果 <div class='d0'> <span class='s0'> <span class='s1'> <span class='s2'>className : s2 テキスト</span> </span> </span> </div> //任意のタイミングでテキスト追加は tag.text(); メソッド var tag = new HtmlText();// HtmlTextインスタンス生成 tag.set('div','class','d0');// 親要素作成 var pn = tag.add(['p','class','p0']);// 子要素作成と、 子要素 pn 配列取得 var cn = tag.add(pn, ['span','class','s0']);// 子要素への要素追加, 第一引数に追加する親要素配列, 第二引数に子要素配列 tag.text(cn, 'cn テキスト');// cn へテキスト追加 tag.text(pn, 'pn テキスト');// pn へテキスト追加 var result = tag.get();//html タグ取得 //出力結果 <div class='d0'> <p class='p0'> <span class='s0'>cn テキスト</span> pn テキスト </p> </div> //一括取得 var result = new HtmlText(["div","id","d0",["span","テキスト1","=>text"],"=>child"]).get(); A : 要素名, B : 属性, C : 属性値, [] : 配列, 配列の初めが A, 後は B, C, の繰り返し
[ A, B, C, B, C, B, C, B, C,...] ← 要素作成
[ A, B, C, B, C,,,,,],"=>child" : 子要素(配列の場所 B) [ A, B, C,[ A, B, C ,B, C ],"=>child", B, C,,,,] ← 子要素作成 [ A, B, C, テキスト,"=>text", B, C,,,,] ← テキスト作成 "テキスト","=>text" : テキストの場所 : B <br> は、<br></br> になります。


このクラスを使わなくても、DOM 要素にアクセスすれば、普通に出来ることを。。。やってたりします。
class の作り方が理解出来てません。
引数の渡し方、値の取得、なんか、使いにくいです。。。

DOM 要素追加の処理を、このクラスに置き換えた所、僅かですが動作が軽くなったようです。
詳しい測定方法は、わからないのですが、ページ読み込み終了から実行される javascript の、
処理の終了までの時間を測定してみました。
平均すると 5 ms くらい?処理時間が短くなりました。( ˘ω˘ )
2017/05/08 : CSS 等調整しました。
2017/05/19 : text() メソッド 追加しました。

DOM 要素追加時の処理時間 : ブラウザは chrome です。

DOM 要素追加時の処理時間

HTML テキストタグ追加時の処理時間 : ブラウザは chrome です。

HTML テキストタグ追加時の処理時間

数学の勉強をやり直ししてたりします。_´ω`)_