06_04.DOMを使ってHTMLの書き換え編

DOM って何 ?

サーバーサイドWebと違い、フロントエンドWebの場合はユーザーの入力要素に対してのアクションが限られてしまいます。
サーバーサイドWebを個人で、まして素人が開設するのはかなり困難です。
費用を掛けてまでそれをする理由とメリットが無い場合はDOMを使って見ましょう。
document.write() を使って書き込む方法も有りますが、ここではTEXTだけでは無く、HTML要素ごと書き込む方法の DOM(DocumentObjectModel) を使用してみます。
書き込みと消去が可能で、利用するシーンは数多く考えられます。

デモと概要

サンプルでは万年暦ならぬ千年暦を作成します。
任意の西暦年(サンプルでは1700から2700)と任意の月(1 から 12)を入力して、その月のカレンダーを表示させます。
土日以外の祝祭日まで対応させるとかなり厄介なので未対応です(最近は祝祭日も変更が多いですしね)。
サンプル(DEMO)では、Box要素<div></div>ごと書き込みと、初期化の為の消去を行っています。

DEMO ページへ

今回のサンプルの要旨です。
[1] 当月の1日の曜日を求める
[2] 当月の1日の前日(前月末日)を求める
[3] 当月末日を求める
以上の3点を求める事により、選択年月のカレンダーを作成しています。

DOM作成の際、日付数値と前月・当月・翌月分の日付数値のFONT-COLORの格納に配列の多次元化を用いています。

code表示に於いて、Safari (Windows版) での表示に段落高さの差異がある事が判明したため、
他のブラウザーでの表示marginを大きく取らざるを得なくなってしまいました。

HTML

CSS

4.DOMを使ってHTMLの書き換え 編

クライアントサイドWebでもDOMで選択肢は広がる・・かも

4.DOMを使ってHTMLの書き換え編