kintoneはgetElementByIdを使わず、getElementsByTagNameを使ったほうがいいよ

kintone

kintoneのレコード追加画面かレコード編集画面の

["app.record.create.show","app.record.edit.show"]

あたりで

document.getElementById();

を使ってjavascriptでフィールド達の間でごにょごにょしているのですが、app.record.create.showと app.record.edit.showで該当する文字列1行フィールドなどのhtmlのinputタグの要素 id はイベント発火の度に接尾辞がそれぞれ変化します。kintoneではinputの要素取得をidで行うと毎回変化するIDを毎回取得する必要があります・・・。

そのため、getElementsByTagName();の 配列要素番号 を使って欲しいHTMLノードを取得し、 setAttributeやgetAttributeで要素上の属性をハンドリングすることになります。

記事タイトルのニュアンスがゆるいですが、個々のフィールドのchangeイベントも取得して他のkintoneアプリも含めてフィールドをjavascriptでごにょるなら、必須のルールです。もっといい方法が有ったら、是非、教えて欲しいです。

画面全体のDOMツリーで3番目のinputに対しての場合

//3番目のinputのhtmlノードを取得
let input_3rd_html_node = document.getElementsByTagName("input")[3];

//3番目のinputのclass要素にhogeを追加(for文でgetAttributeによる取得も可能です)
input_3rd_html_node.setAttribute('class','input-text-cybozu hoge');

//3番目のinputに他の要素を追加
input_3rd_html_node.setAttribute('data-min-length','1');

htmlノード取得の行では、コメントアウトにてフィールド名やフィールドコードとcreateなどのイベントを「何番目のinputです!」みたいに数字と一緒に書いておくと後から対応しやすいと思います。DOMツリーを調べるjsのコードは、デフォルトで書いておいてもいいくらいかと思います。app.record.create.showとapp.record.edit.showで同じinputのHTMLタグに与えられる配列要素番号 が異なるので別々にコードを書く必要があります。kintone.events.onの第1引数に配列でcreateとeditのイベントを入れて行うとハマります。

こうなってくると、再利用性が高いコードに変えていかないと・・・。オブジェクト設計かぁ・・・。

DOMツリーを調べる方法

//全inputを順番に取得
let all_html_input_node_number = document.getElementsByTagName("input");

//コンソールログに表示
console.log('all_html_input_node_number',all_html_input_node_number);

上記でお目当てのinputのHTMLタグが何番目なのか確認してください。もちろん、0番目からカウントしてください。

複数の名前空間を持ったドキュメントを扱う際【参考】

element.getElementsByTagNameNS

なども有るらしいです。こいつは、挙動確認していません。

IDによるHTMLノード取得をいろいろ考えたましたがダメでした

inputのHTMLタグのidに対して正規表現の前方一致で¥^を使いましたがうまくいかず。

さらに、jQueryの要素取得をid内の接頭辞に対して上記の様に仕掛けましたが、吐き出されるオブジェクト形式が見慣れないやつでめんどくさい・・・。

kintoneでgetElementByTagName()を使う場合

「アプリの設定」⇒「フォーム」でフィールドを後から増減操作などした場合、対象のinputのhtmlタグについてノードリストの順番が変わってしまっていないか?毎回、確認する必要があります。めんどくせぇ

npm使ってなくて、すみません・・・

WordPress/kusanagi/Azure/AWS/kintoneの開発運用相談