DOM設定・DOM取得だけで色々できるようにする 📖

マニュアルのDOM～～設定・DOM～～取得の命令が多すぎるのでまとめてみた

プログラム: (→大)
//プラグイン（仮） //domの（和属性名）にvalをDOM設定 //domの（和属性名）をDOM取得 //（和属性名）に使えるもの //なでしこv1の部品のメンバだったもの（一部未対応） //　W、H、幅、高さ、ヒント、有効、可視、ID、親部品 //　背景色、文字色、文字サイズ //　テキスト、アイテム、行数、サイズ //・経緯 //　なでしこ1で育ったからDOMxxxx設定がどれ使っていいかわかんない //　htmlの属性名が日本語じゃないからわかりにくい //・概要 //domの(和属性名)をvalにDOM設定 //　↓　 //　↓　変換テーブルで変換して実行 //　↓　 //domの(html属性名)をvalにDOM属性設定 //domの(html属性名)をvalにDOMスタイル設定 //domの(html属性名)をvalにDOMイベント設定 // //命令部分を自動判別して実行する //(和属性名)を(html属性名)に変換する //追記： //　DOM和スタイルがあることは途中まで作ったところで知った //　 //・DOM和スタイルにはユーザーが追記できる //　ヒントをtitleにするなどである程度はカバーが可能 //　 //・DOM和スタイルでできないことがある //　「DOM属性設定」「DOMスタイル設定」の自動選択 //　有効、可視（なでしこv1での名称）を言い換えずに使用すること //　domの種類でhtml属性名を変更すること //　セレクトボックスのアイテムに関すること #----------------------------------------------------------------------- //　＜仕様（仮）＞ //定義 //　変数　DOM項目テーブル //　●DOM設定(domの,和属性名に,valを) //　●DOM取得(domの,和属性名を) //・和属性名に応じた命令を選んでくれる //・和属性名の部分をhtmlの属性名に直す //　・幅、高さに単位がなければ「px」をくっつける //（呼び出し元の記述）　　　　→　（実行されるもの） //domの「幅」に200をDOM設定　　→　domの「幅」に「200px」をDOMスタイル設定 //domの「ヒント」に「てすと」をDOM設定　　→domの「title」に「てすと」をDOM属性設定 //・和属性名はなでしこ1互換 //　可視はオフ　→　"hidden"をオン //　有効はオフ　→　"disable"をオン //domの「可視」にオフをDOM設定　　→domの「hidden」にオンをDOM属性設定 //・domのタイプによってhtml属性名や命令を変更する //domの「値」にオンをDOM設定　→(もしdomがチェックボックスならば)domの「checked」にオンをDOM属性設定 //domの「値」に2をDOM設定　　→(もしdomがセレクトボックスならば)domの「selectedIndex」に2をDOM属性設定 //domの「値」にオンをDOM設定　→(もしdomがそれ以外ならば)domの「value」にオンをDOM属性設定 //domの「幅」に200をDOM設定　→(もしdomがキャンバスならば)domの「width」に200をDOM属性設定 //domの「幅」に200をDOM設定　→(もしdomがそれ以外ならば)domの「幅」に「200px」をDOMスタイル設定 //domの「行数」に5をDOM設定　→(もしdomがテキストエリアならば)domの「rows」に5をDOM属性設定 //domの「行数」に5をDOM設定　→(もしdomがセレクトボックスならば)domの「size」に5をDOM属性設定 //domの「アイテム」に[配列]をDOM設定　→　(もしdomがセレクトボックスならば)optionを書き換える関数を呼ぶ //・ユーザーがテーブルに追加できる //例） //DOM項目テーブルに『VIDEOのループ loop DOM属性設定 DOM属性取得』を一行追加 //domの「ループ」にオンをDOM設定　→(もしdomがVIDEOタグならば)domの「loop」にオンをDOM属性設定 // //・今後の展開 //　プラグインとしてのお作法があやしいので、誰かが意志を継いでリメイクする //　独自の～～設定を追加しにくいのでリメイクするひとががんばる //　＜仕様ここまで＞ #----------------------------------------------------------------------- //・変数　DOM項目テーブル //変換用のテーブル。　タブ区切りテキスト //domの,和属性に,valを,命令 //　↓ //domの,html属性に,valを,命令 //和属性名 html属性名 設定命令 取得命令 DOM項目テーブル=『 色 色 DOMスタイル設定 DOMスタイル取得 W 幅 DOMスタイル設定 DOMスタイル取得 幅 幅 DOMスタイル設定 DOMスタイル取得 H 高 DOMスタイル設定 DOMスタイル取得 高 高 DOMスタイル設定 DOMスタイル取得 高さ 高 DOMスタイル設定 DOMスタイル取得 背景色 背景色 DOMスタイル設定 DOMスタイル取得 文字色 色 DOMスタイル設定 DOMスタイル取得 文字サイズ 文字サイズ DOMスタイル設定 DOMスタイル取得 文字書体 不明 不明 不明 文字レイアウト 不明 不明 不明 レイアウト 不明 不明 不明 可視 hidden 可視設定 可視取得 有効 disabled 有効設定 有効取得 ヒント title DOM属性設定 DOM属性取得 種類 tagName 設定不可 DOM属性取得 名前 name DOM属性設定 DOM属性取得 ID id DOM属性設定 DOM属性取得 親部品 parentNode 親部品設定 DOM属性取得 ポケット 不明 不明 不明 テキスト 不要 DOMテキスト設定 DOMテキスト取得 値 value DOM属性設定 DOM属性取得 checkboxの値 checked DOM属性設定 DOM属性取得 checkboxのテキスト 不要 チェックボックステキスト設定 チェックボックステキスト取得 CANVASの幅 width DOM属性設定 DOM属性取得 CANVASのW width DOM属性設定 DOM属性取得 CANVASの高 height DOM属性設定 DOM属性取得 CANVASの高さ height DOM属性設定 DOM属性取得 CANVASのH height DOM属性設定 DOM属性取得 CANVASのサイズ キャンバスサイズ設定 キャンバスサイズ取得 TEXTAREAの列数 cols DOM属性設定 DOM属性取得 TEXTAREAの行数 rows DOM属性設定 DOM属性取得 TEXTAREAの選択位置 不明 不明 不明 TEXTAREAの選択文字数 不明 不明 不明 TEXTAREAの選択文字列 不明 不明 不明 SELECTの行数 size DOM属性設定 DOM属性取得 SELECTのリスト行数 size DOM属性設定 DOM属性取得 SELECTのアイテム アイテム セレクトボックス設定 セレクトボックス取得 SELECTの値 値 セレクトボックス設定 セレクトボックス取得 SELECTのテキスト テキスト セレクトボックス設定 セレクトボックス取得 変更した時 onchange DOMイベント設定 取得不可 クリックした時 onclick DOMイベント設定 取得不可 Aのリンク先 href DOM属性設定 DOM属性取得 IMGの画像 src DOM属性設定 DOM属性取得 』 //特定の種類のDOMに対して和属性名のふるまいを変える時は //(tagName)の和属性名 //(INPUT type)の和属性名 //tagName=BUTTON TEXTAREA SPAN SELECT CANVAS //INPUT type= text checkbox //「不要」は変換の必要がない（使用しない・存在しない） //「不明」は　だれか　くわしいひとが　うめる //プラグイン内の関数で使用する ●DOM項目テーブル取得 　DOM項目テーブルをTSV取得 ここまで //domと和属性名をみて、html属性名を調べてDOMxxxx設定を実行する ●DOM設定(domの,和属性名に,valを) 　変数　設定取得="設定" 　DOM設定取得(dom,和属性名,val,設定取得) ここまで ●DOM取得(domの,和属性名を) 　変数　設定取得="取得" 　DOM設定取得(dom,和属性名,"",設定取得) ここまで ●DOM設定取得(dom,和属性名,val,設定取得) 　//ローカル変数 　変数　tag=""　//domのtagName もしくは domのtype 　変数　検索語1=""　// 　変数　検索語2=""　// 　変数　table=[]　//属性名の和→htmlの変換テーブル 　変数　index=-1　//tableを検索語で表検索した結果 　変数　html属性名=""　//和属性名に対応するhtml属性名(tableから取得) 　変数　命令=""　//html属性名を適用するための命令(tableから取得) 　 　 　//DOMの種類をメモ。　○○作成でできるものとCANVAS。　INPUTならtypeで判別 　tag = domの"tagName"をDOM属性取得　//BUTTON INPUT TEXTAREA SPAN SELECT　など 　もしtagが「INPUT」ならば 　　　tag=domの"type"をDOM属性取得//text checkbox　など 　ここまで 　 　 　//テーブルから検索 　検索語1は「{tag}の{和属性名}」　//checkboxの値　など 　検索語2は和属性名　//値など　　そのまま 　 　table=DOM項目テーブル取得 　index=tableの0で0から検索語1を表検索 　もしindex<0ならば 　　　index=tableの0で0から検索語2を表検索 　ここまで 　 　 　//見つからない場合 　もしindex<0ならば 　　　「"{和属性名}"に対応していません」と表示 　　　戻る 　ここまで 　 　 　 　//属性名を日本語→英語に直して命令も決める 　もしindex>0ならば 　　　//domの,html属性名に,valを,命令 　　　html属性名 = table[index][1]　//和→英 　　　val = val　　//そのまま 　　　もし設定取得が「設定」ならば 　　　　　命令=table[index][2]　//DOM属性設定とか 　　　ここまで 　　　もし設定取得が「取得」ならば 　　　　　命令=table[index][3]　//DOM属性取得とか 　　　ここまで 　　　 　　　もしhtml属性名が「不明」ならば 　　　　　「"{和属性名}"に対応していません」と表示 　　　　　戻る 　　　ここまで 　　　 　　　 　　　DOM設定_作業(domの,html属性名に,valを,命令) 　　　戻る 　　　 　ここまで 　 ここまで //実際の実行部分 ●DOM設定_作業(domの,html属性名に,valを,命令) 　命令で条件分岐 　　　「可視設定」ならば　//domの「可視」をオフに設定　→　dom["hidden"] = 1 　　　　　もしvalならば 　　　　　　　domのhtml属性名にオフをDOM属性設定 　　　　　違えば 　　　　　　　domのhtml属性名にオンをDOM属性設定 　　　　　ここまで 　　　ここまで 　　　「可視取得」ならば 　　　　　domのhtml属性名をDOM属性取得 　　　　　それ=1-それ 　　　ここまで 　　　「有効設定」ならば　//domの「有効」をオフに設定　→　dom["disabled"] = 1 　　　　　もしvalならば 　　　　　　　domのhtml属性名にオフをDOM属性設定 　　　　　違えば 　　　　　　　domのhtml属性名にオンをDOM属性設定 　　　　　ここまで 　　　ここまで 　　　「有効取得」ならば 　　　　　domのhtml属性名をDOM属性取得 　　　　　それ=1-それ 　　　ここまで 　　　「レイアウト設定」ならば　　//domの「レイアウト」をval(左|中央|右)にDOM設定 　　　　　 　　　　　//未実装 　　　　　 　　　ここまで 　　　「親部品設定」ならば　　//domの「親部品」にvalをDOM設定 　　　　　valへdomをDOM子要素追加 　　　ここまで 　　　「DOM属性設定」ならば 　　　　　domのhtml属性名にvalをDOM属性設定 　　　ここまで 　　　「DOM属性取得」ならば 　　　　　domのhtml属性名をDOM属性取得 　　　ここまで 　　　「DOMスタイル設定」ならば 　　　　　//幅、高さが数列ならば"px"をつける 　　　　　もし(html属性名が「高」と等しい)または(html属性名が「幅」と等しい)ならば 　　　　　　　もし(valが数列か判定)ならば 　　　　　　　　　val=「{val}px」 　　　　　　　ここまで 　　　　　ここまで 　　　　　 　　　　　domのhtml属性名にvalをDOMスタイル設定 　　　ここまで 　　　「DOMスタイル取得」ならば 　　　　　domのhtml属性名をDOMスタイル取得 　　　ここまで 　　　「DOMテキスト設定」ならば 　　　　　domにvalをDOMテキスト設定　//html属性名は不要 　　　ここまで 　　　「DOMテキスト取得」ならば 　　　　　domからDOMテキスト取得　//html属性名は不要 　　　ここまで 　　　「DOMイベント設定」ならば 　　　　　domのhtml属性名にvalをDOMイベント設定 　　　ここまで 　　　「チェックボックステキスト設定」ならば 　　　　　domの「labels」をDOM属性取得して反復 　　　　　　　対象にvalをテキスト設定 　　　　　ここまで 　　　ここまで 　　　「チェックボックステキスト取得」ならば 　　　　　domの「labels」をDOM属性取得して反復 　　　　　　　対象のテキスト取得 　　　　　　　抜ける 　　　　　ここまで 　　　ここまで 　　　「キャンバスサイズ設定」ならば 　　　　　//[x,y,w,h]のw,とhを使う 　　　　　domの"width"にval[2]をDOM属性設定 　　　　　domの"height"にval[3]をDOM属性設定 　　　ここまで 　　　「キャンバスサイズ取得」ならば 　　　　　[0,0,domの"width"をDOM属性取得,domの"height"をDOM属性取得]を戻す 　　　ここまで 　　　「セレクトボックス設定」ならば 　　　　　//マルチプルの場合分岐するかも？ 　　　　　html属性名で条件分岐 　　　　　　　「アイテム」ならば、 　　　　　　　　　domのセレクトアイテム全削除 　　　　　　　　　domにvalをセレクトアイテム設定 　　　　　　　ここまで 　　　　　　　「値」ならば、 　　　　　　　　　domの「selectedIndex」にvalをDOM属性設定 　　　　　　　ここまで 　　　　　　　「テキスト」ならば、 　　　　　　　　　domにvalをテキスト設定 　　　　　　　ここまで 　　　　　　　違えば 　　　　　　　　　「"{命令}　{html属性名}"の実装漏れです」を表示 　　　　　　　ここまで 　　　　　ここまで 　　　ここまで 　　　「セレクトボックス取得」ならば 　　　　　//マルチプルの場合分岐するかも？ 　　　　　html属性名で条件分岐 　　　　　　　「アイテム」ならば 　　　　　　　　　domのセレクトアイテム取得 　　　　　　　ここまで 　　　　　　　「値」ならば 　　　　　　　　　domの「selectedIndex」をDOM属性取得 　　　　　　　ここまで 　　　　　　　「テキスト」ならば 　　　　　　　　　domからテキスト取得 　　　　　　　ここまで 　　　　　ここまで 　　　ここまで 　　　「設定不可」ならば 　　　　　「設定することはできません」と表示 　　　ここまで 　　　「取得不可」ならば 　　　　　「取得することはできません」と表示 　　　ここまで 　　　違えば 　　　　　「"{命令}　{html属性名}"の実装漏れです」を表示 　　　ここまで 　ここまで ここまで //マニュアルから転載 ●(Aの)セレクトアイテム全削除 　IDとは変数＝Aの「id」をDOM属性取得。ID=「#{ID}」 　OPTIONとは変数＝「{ID} option」のDOM要素全取得。 　OPTIONを反復 　　Aから対象をDOM子要素削除。 　ここまで。 ここまで。 ●(AにOPTIONを)セレクトアイテム設定 　(OPTIONの要素数)回 　　EL＝「option」をDOM要素作成。 　　ELにOPTION[回数-1]をテキスト設定。 　　ELの「value」にOPTION[回数-1]をDOM属性設定。 　　AへELをDOM子要素追加。 　ここまで。 ここまで。 ●(Aの)セレクトアイテム取得 　結果とは変数　＝[] 　Aの「options」をDOM属性取得して反復 　　　結果[対象キー]=対象のテキスト取得 　ここまで。 　結果を戻す ここまで。 #----------------------------------------------------------------------- #----------------------------------------------------------------------- //　DOM設定・DOM取得のサンプル #----------------------------------------------------------------------- #----------------------------------------------------------------------- もし、プラグイン名が「メイン」ならば 　//キャンバス　　　幅はスタイルではなく属性に。 　描画中キャンバスの「幅」に200をDOM設定　//→　widthに200をDOM属性設定 　描画中キャンバスの「高さ」に100をDOM設定 　描画中キャンバスの「サイズ」をDOM取得　//→[0,0,200,100] 　それへ四角描画 　描画中キャンバスの「ヒント」に「キャンバス」をDOM設定 　 　 　//エディタ　　　幅はスタイルにしてpx。 　dom=「」のエディタ作成 　domの「幅」に300をDOM設定　　//→　幅に300pxをDOMスタイル設定 　domの「背景色」に灰色をDOM設定　//DOMスタイル 　domの「文字色」に黄色をDOM設定　//DOMスタイル 　domの「テキスト」に「マウスオーバーでヒント」をDOM設定 　domの「ヒント」に「有効オフのエディタです」をDOM設定　//titleにDOM属性設定 　domの「有効」にオフをDOM設定　//disabledをオン 　 　 　//テキストエリアの設定 　改行作成 　dom=「テキストエリア」のテキストエリア作成 　domの「幅」に300をDOM設定　　//→　幅に300pxをDOMスタイル設定 　domの「行数」に5をDOM設定　//テキストエリアの行数→rows 　 　//セレクトボックスの設定 　改行作成 　dom=[]のセレクトボックス作成 　domの「行数」に5をDOM設定　//セレクトボックスの行数→size 　domの「W」に300をDOM設定　//幅・W・widthを同一視 　「子・丑・寅・卯・辰・巳・午・未・申・酉・戌・亥」を「・」で区切る 　domの「アイテム」にそれをDOM設定 　domの「値」に2をDOM設定 　 　domの「アイテム」をDOM取得して表示　//[子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥] 　domの「テキスト」をDOM取得して表示　//寅（値が2なので） 　 　 　//「親部品」をほかの部品にしてぶら下げる　なでしこv1風 　改行作成 　Aタグ=「a」のDOM要素作成 　Aタグの「親部品」にDOM親要素をDOM設定//DOM子要素追加 　Aタグの「ヒント」に「画像リンクのテスト」をDOM設定 　Aタグの「リンク先」に「https://nadesi.com/」をDOM設定 　 　IMGタグ=「img」のDOM要素作成。 　IMGタグの「画像」に「https://nadesi.com/top/attach/31.jpg」をDOM設定 　IMGタグの「W」に200をDOM設定 　IMGタグの「親部品」にAタグをDOM設定　//画像をAタグの内側に移動する ここまで