innerHTMLを変更する時は描画ルールとタイミングを考慮しないとはみ出る

<input style="width:100%">なエレメントをinnerHTMLで作成する場合、inputの中身を書き換えるタイミングに注意しないとinputのwidthを100%にしているのに親要素の幅を無視してレイアウトを狂わせてしまう場合があります。

レイアウトが崩れる例と崩れない例のサンプルを作成しました。

iframeからlocationをgetしたい場合はidが必須でframesから辿る

タイトルの内容を覚えられればそれでOKなのですが、私はどうやら覚えられないらしく、必要になるたびに過去のサンプルを確認しているアリサマなのでiframeをコントロールする時に使うメソッドもまとめておくことにしました。

間隔調整式setIntervalを作成しました

昨日の記事ではsetIntervalの間隔がわりとアバウトで、しかもズレが累積されていくということをご紹介しました。
ズレを考慮して次回までの間隔を自動的に調整するタイプのsetIntervalを作成しました。

setIntervalの精度は間隔の長さに比例する

精度はあまり良くないということは聞いたことがありましたが、実際にどういう感じなのか知らなかったのでサンプルを作って動作確認しました。

結論としては間隔が短いほど精度が悪化していきます。

あと、定期的に実行するfunctionが処理に要する時間に応じて精度が落ちていく、というか次の実行までの間隔が伸びていくので、setIntervalを実行した瞬間から計算して「このタイミングで何回目の処理が行われる」の時刻からどんどん遅れていくことになります。

getChildsで作成したオブジェクトからクローンを作成する関数

昨日公開したgetChildsが返すオブジェクトは「<div>メイン</div>」を「obj.divメイン」のように参照することができるようにするものでした。

必要に応じて複数回クローンを作成するようなモデルエレメントに対してgetChildsを実行した場合、getChildsの機能によってiTやvalueなどが変化するため、一度getChildsで処理したエレメントやその複製をgetChildsに渡すと、意図した参照用プロパティが得られないという問題がありました。

上記の問題は、本日公開するgetCloneという独自関数で解決できます。

idやname属性を使わずにエレメントを取得する関数

「<button id=btn作成>作成</button>」のような書き方が冗長だと感じていました。
「<button>作成</button>」を含むエレメントを渡すと「obj.btn作成」という形式でエレメントに参照できるようにする独自関数を作成しました。

二つの変数に入っているエレメントが同じものを参照しているか判定する

「同じ」と判定する基準としては
１．outerHTMLの値が一致する
２．document.bodyからのDOMツリー内ポジションが一致する
３．タグ名が一致する
などなど色々あり、どういう意味で「同じ」ものが必要かによって判定基準を変える必要があります。

この記事で扱うのは「変数Aから参照しているエレメントにinsertBeforeすると変数Bから参照しているエレメント側でも子要素が増える」という意味での「同じ」エレメントかどうかを判定する基準を用いた判定用関数です。