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の2つのイベントを入れて行うとハマります。

document内のinputのノードの順番を調べる方法

//全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タグについてノードリストの順番が変わってしまっていないか?毎回、確認する必要があります。誰かが知らずにフィールド増減するとinputに仕掛けたjsが動かなくなるなどが起きる。めんどくせぇ。

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

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