HOME

{ 配列を利用した DOM 要素一括作成 : javascript }

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

推奨 ブラウザ : chrome

HTMLテキスト版作成しました → { 配列を利用した HTML テキスト(タグ)一括作成 : javascript }
前回の " javascript,css,html ソースコードハイライト表示 " で作成した
createElement 関数を調整しました。
この createElement 関数は、 Array 配列を利用して DOM 要素を一括作成します。
関数に渡す配列の指定箇所に、要素情報で、一度の関数呼び出しで、
要素入れ子、テキスト、ユニーク id を含む複数の DOM 要素を作成できます。
戻り値に DOM 要素が返ってくるので、 appendChild メソッドを使用してドキュメントに反映させます。
配列値の指定方法は、上記にもあります。
A : 要素名, B : 属性, C : 属性値
var obj = createElement([ A, B, C, B, C, B, C, B, C,...]);
配列開始の場所 A は、DOM 要素も処理できると思います。
createDocumentFragment で要素作成時用です。

要素入れ子、テキスト、ユニーク id, 作成は、
要素入れ子、 id, の場合、B の場所に配列を作成します。
要素入れ子は親要素と同じ記述方法です。
id は配列を使用することが出来ます。
配列を利用して、同じ階層の要素に値を渡すとインデックスを付けた id が返ってきます。
インデックスの値は、配列で id を指定した場所が深いと大きな数字が返ってきます。
要素名直下に id 指定で、小さな数字にすることが出来ます。
1 番からの数字を渡すようにしたかったのですが、処理のやり方が悪いようで、無理でした。ヽ(´ー`)ノ
テキストは、 B の場所です。
この 3 つを指定する時、その値に対応する属性値の場所 C に 固有の値を指定する必要があります。
子要素の場合、属性値の場所 C に '=>child'
id の場合、属性値の場所 C に '=>id'
テキストの場合、属性値の場所 C に '=>text'
この値を指定しないと処理されないと思います。
要素を書き出さない場合、属性値の場所 C にある値に、
空の String 指定で、要素は作成されません。

前回の " javascript,css,html ソースコードハイライト表示 " で作成した
createElement 関数は、 60 行くらい、今回のは、 150 行。。。(*'ω' *)
あのコードで大丈夫なのでしょうか。。。
使ってみた感想は、テキスト記述とか特に、めんどくさいです。┏( .-. ┏ ) ┓

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