Javascript htmlやform操作のサンプル
Javascriptでhtmlやformを操作するサンプルコードを、記載してます。イベントやCSSに関するサンプルコードもこのページにはまとめてあります。是非、ご活用下さい。
html操作
マークアップ言語である「html」の作成方法や画面での操作方法に関するサンプルコードとなります。
- html要素のidを変更する
- htmlタグから要素を取得する
- liタグの数をカウントする
- 要素を拡大させる
- 要素を削除する
- 指定したclass名から要素を取得する
- フォーカスされている要素を取得する
- iframe内でフォーカスされている要素を取得する
- フォーカスがあたっているかを判定する
- html5のデータ属性を作成する
- setAttributeで属性を作成する
- 次にあるhtml要素を取得する
- removeでhtml要素を削除する
- removeでクラス名を指定して複数の要素を削除する
- 指定したhtml要素にフォーカスを当てる
- 指定したid名から要素を取得する
- html要素を表示・非表示を切り替える
- htmlの要素を奇数・偶数ごとに処理を分ける
- createElementでhtml要素を作成する
- createDocumentFragmentでまとめてhtml要素を作成する
- html要素をレイアウトを崩さずに表示・非表示を切り替える
- htmlタグにクラスを追加する
- html内に動的にコメントを追加する
- 要素を指定した親要素内に追加する
- htmlタグをhtml上で表示する
- htmlタグの要素の高さと幅を取得する
- htmlタグの要素の高さと幅を枠線の幅を含んで取得する
- htmlタグ内にあるhtmlデータを取得する
- 指定したhtml要素内にある要素数をカウントする
- querySelectorを使用して要素を取得する
- parentElementで親要素を取得する
- insertAdjacentHTMLを使用してhtml要素を挿入する
- cloneNodeを使ってhtmlをコピーする
- 複数の要素を要素名を指定して取得する
- ランダムに動くhtml要素を作る
- 取得した要素を条件を指定して抽出する
- aタグからjavascriptを実行する
- aタグで使用されているアンカーの数を取得する
- styleタグを追加する
- サイトのmeta keywordsを取得する
- 複数のidを指定して取得する
- faviconを変更する
- removeChildでnameを指定して複数の要素を一括で削除する
- タイトルを取得または変更する
- html要素のテキストを変更する
- DOCTYPEを取得する
- html要素の座標を取得する
- htmlの属性の値を取得する
- 指定したhtml要素が存在するかを確認する
- 1階層下の最初のhtmlタグ(子要素)を取得する
- 選択中のテキストを取得する
- htmlエスケープを行う
- htmlをアンエスケープする
- 要素を置換する
- 指定した要素の選択を不可能にする
- replaceWithでhtmlタグ要素を変更する
- 別のボタンからボタンをクリックする
- リンククリックでボタンを非活性から活性化させる
- 同じタグの要素全てにイベントを登録する
- requiredを削除する
- autocomplete属性を取得して変更を行う
- formaction属性を追加する
- formnovalidate属性の状態を取得して設定する
- size属性の値を取得して変更する
- accept属性を取得して変更する
- list属性からdatalistを取得する
- pattern属性の値を取得して変更する
- multiple属性の設定を変更する
- indeterminate属性の値をtrueに設定する
- inputmode属性の値を設定する
- dirname属性の値を取得して変更する
- step属性の値を取得または変更する
- formenctype属性を確認して指定する
- formtarget属性の値を取得して設定する
- type属性の値を取得または変更する
- src属性の値を取得して変更する
- min属性の値を取得して設定する
- formmethod属性を取得して設定する
- dirnameの値が取得できない
- readonly属性の状態を取得して変更する
- labelタグのfor属性の値を取得する
- max属性の値を取得して設定する
- aria-labelから要素を取得する
- 要素が生成されてからの経過時間を取得する
- 文字実体参照をそのままhtml上に表示する
- HTMLFormControlsCollectionを使用してform内の要素を取得する
- tableのcaption要素を取得する
- tableのthead要素を取得する
- tableのtbody要素を取得する
- tableのtFoot要素を取得する
- tableのtr要素を全て取得する
- tableのthead要素を作成する
- tableのcaption要素を作成する
- tableのtd要素を作成する
- tableのtr要素を作成する
- tableのtbody要素を作成する
- tableのtfoot要素を作成する
- tableのtfoot要素を削除する
- tableのcaption要素を削除する
- tableのthead要素を削除する
- videoタグの再生ボタンを作成する
- videoタグが繰り返し再生になっているかを判定する
- videoタグが自動再生になっているかを判定する
- videoタグが使用可能であるかを判定する
- videoタグの再生時間を取得する
- videoタグの動画の全再生時間を取得する
- videoタグの再生開始のイベントを取得する
- videoタグの動画再生できるタイミングのイベントを取得する
- videoタグの一時停止のイベントを取得する
- videoタグのメタ情報ロード完了時のイベントを取得する
- videoタグの動画読み込み完了時のイベントを取得する
- videoタグの動画終了のイベントを取得する
- videoタグの動画の初回読み込みやバッファ中のイベントを取得する
- videoタグの動画の再生速度を変更する
- videoタグの音量を設定する
- videoタグの音量変更時のイベントを取得する
- videoタグをミュートに設定する
- videoタグの再生速度変更時のイベントを取得する
- videoタグの停止ボタンを作成する
- 1つ前のページに戻る
- 1つ次のページに進む
- ツールチップを改行して表示する
- idとclass両方を選択して要素を取得する
- 現在のタブが切り替わったかを判定する
- 要素同士が重なっているかを判定する
- xy座標を指定して距離を求める
- data属性(data-*)を全て取得する
form操作
「html」の「form」の作成方法や画面での操作方法に関するサンプルコードとなります。
- フォームの値を削除する
- type=fileの内容をクリアする
- type=dateの値をクリアする
- name属性を指定して要素を取得する
- name属性の値を変更する
- フォーム内にある全てのフォーム要素を取得する
- テキストフォームの初期値を取得する
- テキストフォームをフォーカス時に全選択状態にする
- テキストフォームに入力されたの文字列を取得する
- テキストフォームに値を代入する
- テキストフォームにフォーカス時に最後の値の位置に移動する
- テキストエリアの値を取得する
- テキストエリアの値をクリアする
- ファームに入力されたURLをリンクに変換する
- チェックボックスをチェックする
- 全てのチェックボックスがチェックされているかを確認する
- チェックボックス全てをaddEventListenerに加える
- 要素がチェックボックスであるかを判定する
- ラジオボックスの値を取得する
- ラジオボタンをチェック状態に変更する
- チェックされているラジオボタンを取得する
- セレクトボックスの選択状態を何も選択してない状態にする
- セレクトボックスの任意の位置を指定する
- セレクトボックスで選択した値を取得する
- セレクトボックスで選択されたテキストデータを取得する
- セレクトボックス内の値を全てを取得する
- セレクトボックス内のoptionの数を取得する
- hiddenの値を取得する
- レンジ入力(input type=”range”)の値を取得する
- カラーピッカー(type=”color”)の値を取得する
- submit時にイベントを取得してアラートを表示する
- フォーカスを外す
- フォーカスが当たったことを検知する
- placeholderに指定した値を取得する
- オートコンプリートを設定する
- パスワード入力値を取得する
- フォームを非活性化させる
- maxlengthに指定している値を取得する
- フォームの数値を使用すると結果がおかしくなる
- reset時のイベントを取得してメッセージを表示する
- type=dateの値を日付型として取得する
- textareaのrequired属性の状態を取得する
- textareaの入力文字数に制限をかける
- form内の要素を全て取得する
- formの値を指定した値で加算させる
- formの値を指定した値で減算させる
- formの値を範囲を指定して置換する
CSS操作
「CSS」の作成方法や画面での操作方法に関するサンプルコードとなります。デザインに関連することが中心です。
- 使用しているクラス一覧を取得する
- 使用しているクラスを削除する
- ベンダープレフィック付きのCSSを変更する
- 読み込んでいるcssを変更する
- opacity(透明度)を変更する
- 背景色を変更して切り替える
- createElement実行時にclassを設定する
- 指定したid内の要素をclassを指定して取得する
- windowサイズを指定してリサイズする
- 枠線を追加する
- fontサイズを変更する
- テキストに下線を引く
- クラスを入れ替える(classList.replace)
- 使用しているクラスを一括で編集する
- 指定したクラスを使用しているかを確認する
- !importantを適用する
- 指定した要素のstyleをコピーして使用する
- animateを使用して画像の拡大・縮小を行う
- animateを使用して横に伸びる要素を作成する
- animateを使用して背景色を変更する
- animateを使用して斜めに移動する要素を作成する
- animateを使用して揺れる要素を作成する
- animateを使用して画像スクロールを作成する
- animateを使用して下に落ちる要素を作成する
- animateを使用して点滅する要素を作成する
- animateを逆に再生させる
- animateを停止する
ノード操作
ノードの作成方法や操作方法に関するサンプルコードとなります。
- ノードを追加する(insertBefore)
- 親ノードを取得する(parentNode)
- 最初の子ノードを取得する(firstChild)
- 最後の子ノードを取得する(lastChild)
- 任意の子ノードを取得する(childNodes)
- 最初の子ノードにノードを追加する(prepend)
- 直前のノードにテキストや要素を追加する(before)
- 直後のノードにテキストや要素を追加する(after)
- 次にあるノードを取得する(nextSibling)
- 最後の子ノードにノードを追加する(append)
- テキストノードを追加する(createTextNode)
- ノードの値を変更する(nodeValue)
- ノードを最後に追加する(appendChild)
- 子ノードがあるかを判定する(hasChildNodes)
- ノードの種類を取得する(nodeType)
- ノードを削除する(removeChild)
- 前にあるノードを取得する(previousSibling)
- ノードの名前を取得する(nodeName)
- 自分自身のノードを削除する
- ノード内の全ての子ノードを削除する
- div要素内にノードが存在するかを判定する
- ノードを移動させる
- ノードを範囲を指定して選択状態にする
イベント取得
ブラウザで発生する様々なイベントについてのサンプルコードとなります。
- 発生したイベントの種類を取得する
- addEventListenerで設定したイベントを削除する
- キーが押されたイベントを取得する(onkeydown)
- ドラッグイベントを取得する(ondragend)
- ドラッグ操作中のイベントを取得する(ondrag)
- ドロップ対象の要素内にいる間のイベントを取得する(ondragover)
- 貼り付けイベントを取得する(onpaste)
- フォームの変更イベントを取得する(onchange)
- タッチ開始のイベントを取得する(ontouchstart)
- タッチ終了のイベントを取得する(ontouchend)
- タッチ中のイベントを取得する(ontouchmove)
- ダブルタップイベントを取得する
- コピーイベントを取得する(oncopy)
- 文字キーが押されたイベントを取得する(onkeypress)
- テキストの選択イベントを取得する(onselect)
- マウスオーバー時のイベントを取得する(onmouseover)
- マウスのクリックイベントを取得する(onmousedown)
- マウスのクリック押しっぱなしを取得する(onmousedown)
- マウスカーソルの移動イベントを取得する(onmousemove)
- マウスからボタンが離れたイベントを取得する(onmouseup)
- マウスカーソルが要素から外れたイベントを取得する(onmouseout)
- マウスのホイールを動かした時のイベントを取得する(onmousewheel)
- キーが離されたイベントを取得する(onkeyup)
- フォーカスが外れたイベントを取得する(onblur)
- 要素にドロップされたイベントを取得する(ondragenter)
- ctrlKeyプロパティでctrlキーが押されているかを判定する
- キーのコード(code)を取得する
- 右クリックのイベントを取得する
- 矢印キーの入力を取得する
- ダブルクリックのイベントを取得する(ondblclick)
- 切り取りイベントを取得をする(oncut)
- onmouseenterを使ってマウスオーバー時のイベントを取得する
- イベントの実行元の要素を取得する
- イベント発生元のclassを取得する
- ペーストインベントを取得する
- metaKeyプロパティでmacのcommandキーが押されているかを判定する
- addEventListenerのコールバック関数に引数を渡す
- パスワード入力をリアルタイムで表示する
- イベント発生元の要素を取得する
- イベント発生元のvalueを取得する
- イベントを発生させた要素のidを取得する
- イベント発生元のフローを取得する
- イベント発生元の親要素までのイベントを取得する
- イベント発生元のfileのtypeを取得する
- イベント発生元のfileのサイズを取得する
- イベント発生元のfileの名前を取得する
- イベント発生からイベントバブル(親要素までイベントが発生するか)を判定する
- イベント発生元がキャンセル可能であるかを判定する
- onmouseleaveを使ってマウスカーソルが外れたイベントを取得する
- マウスオーバーでテキストの色を切り替える
- onclickに複数のイベントを登録する
- 同じ要素からのイベントを指定した場所で止める
- クリックイベントで親要素のクリックイベントは実行させないようにする
- iframeのロード時に処理を実行する
画像またはCanvas
画像関連のサンプルコードとなります。
- マウスオーバーで画像を切り替える
- 画像のサイズを取得する
- 画像の読み込み中を確認する
- 画像をキャッシュ化させないようにする
- 指定した画像のサイズを変更する
- imgタグの画像をbase64文字列に変換する
- 画像を切り抜いて表示する
- 画像をドラッグ&ドロップする
- 複数アップロードされたファイルの名前を取得する
- 一定時間ごとに画像を切り替える
- transformを設定して画像を回転させる
- canvasタグを使用してテキストを書く
- canvasタグに画像を入れる
- canvasタグに正三角形を作成する
- canvasで画像を拡大して表示する
- canvasで画像を繰り返して表示する
- canvasタグに円や半円を描画する
- canvasタグに円形のグリッドを作成する
- canvasタグに四角形を作成する
- canvasタグを使用して3次ベジェ曲線を作成する
- canvasタグに影やぼかしをつける
- canvasタグを使用してパス(2次曲線)を作成する
- canvasタグを使用してグラデーションを作成する
- canvasタグに正方形のグリッドを作成する
ブラウザ
ブラウザ上の操作に関するサンプルコードとなります。
- ブラウザの印刷ダイアログを表示する
- ページ遷移時に「このサイトを離れますか?」を表示する
- ブラウザを判定する
- ブラウザに設定されている言語設定を取得する
- リロードを検知する方法
- 入力ダイヤログを表示する
- 開いた別ウィンドウを閉じる
- ポップアップウィンドウから値を入力させる
- windowサイズ変更時に処理を記述する
- リンク元のURLを取得する
- カーソルの種類を変更する
- サイトを上下に移動させる
- クリックした位置を取得する
- タッチされた画面の位置を取得する
- ページの再読み込みを実行する
- リロードボタンを作成する
- 全画面表示に変更する
- 指定したサイトに移動する
- 選択したテキストを取得する
- マウスカーソルを固定する
- スクロールを禁止する
- コピペを禁止する
- ページ最下部までスクロールさせる
- スクロール量を取得する
- 横スクロール量を取得する
- スクロールした方向を取得する
- スクロール時に指定した要素を通過した際に処理を実行する
- 利用しているブラウザでCookieが有効かを確認する
- 確認用のダイヤログを表示する
- 履歴を残さずにページ移動する
- location.reload() を一度だけ実行する
- ブラウザの履歴の数を確認する
- 画面の解像度とウィンドウサイズを取得する
- 自作の右クリックメニューを作成する
- F5とctrl+rでのリロードを禁止する
- mousetrapを使用してブラウザ上でのキー入力を検知する
- Cookieを利用する