JavaScript Cheat Sheet
自分がよく使うものだけを抜粋DOM関連
| $element = document.createElement( "element" ); | 要素の生成 |
| $element.setAttribute( "hoge" , "hogeValue" ); | 属性と属性値の付加 |
| $target.appendChild( $element ); | 要素の追加 |
| $element = document.getElementById( "hoge" ); | ID名から要素の取得 |
| elements = document.getElementsByClassName( "hoge" ); | クラス名から要素群の取得 |
| elements = document.getElementsByTagName( "hoge" ); | タグ名から要素群の取得 |
| elements = $element.children; | 子要素群の取得 |
| $target = $element.parentNode; | 親要素の取得 |
| $element.innerHTML = "hoge"; | HTML構文の設定 |
| $element.textContent = "hoge"; | 生テキストの設定 |
| $element.id = "hoge"; | IDの設定 |
| $element.className = "hoge"; | クラスの設定（基本的に単一） |
| $element.style.cssText = "hoge { fuga: piyo; }"; | スタイルの設定 |
| $element.addEventListener( "click" , function(){ hoge(); } , false ); | クリックイベントの設定 |
| rect = $element.getBoundingClientRect() | 要素のサイズ（width, height）と位置（x, y, left, top, right, bottom）の取得 |
| $element.classList.add( "hoge" , , , , ); | クラス群の追加（複数可） |
| $element.classList.remove( "hoge" , , , , ); | クラス群の削除（複数可） |
| $element.classList.toggle( "hoge" ); | 要素に指定したクラスが、有れば削除、無ければ追加 |
| bool = $element.classList.contains( "hoge" ); | クラスを含むか判定 |
※ element:要素名, $element:要素ノード, elements:要素ノード配列, $target:任意のノード, hoge/fuga/piyo:メタ構文変数
配列関連
| ary = new Array( num ); | 配列の生成 |
| ary = str.slice( chr ); | 文章を指定した文字で区切り配列を生成 |
| num = ary.length; | 配列の長さの取得 |
| num = Math.max.apply( {}, ary ); | 配列中の最大値の取得 |
| num = Math.min.apply( {}, ary ); | 配列中の最小値の取得 |
| ary2 = ary1.slice( num ); | 配列を指定した位置から複製 |
| ary = Array.prototype.slice.call( elements ); | 要素群を配列に変換してから複製 |
| num = ary.indexOf( hoge ); | 引数と同じ内容を持つ配列要素の内、最初のものの添字を取得 |
※ ary:配列, num:数値, chr:文字, str:文字列
外部ファイル関連
| req = new XMLHttpRequest(); | 外部ファイルを読み込むためのオブジェクトを作成 |
| req.open( "get" , fileURL , bool ); | 外部ファイルを読み込む, 第3引数=[true:非同期 ,false:同期] |
| req.send( null ); | 非同期ならばすぐに、同期的ならばレスポンスが返ってきてからリクエストの送信 |
| req.onloadstart = function(){ hoge(); } | req.open()呼出時に関数を実行 |
| req.onprogress = function(){ hoge(); } | レスポンスの受信中に繰り返し関数を実行 |
| req.onload = function(){ hoge(); } | レスポンス受信成功後に関数を実行 |
| req.onloadend = function(){ hoge(); } | レスポンス受信後に関数を実行（成否は問わない） |
| req.onerror = function(){ hoge(); } | レスポンス受信失敗後に関数を実行 |
| req.timeout = function(){ hoge(); } | 接続がタイムアウト時に関数を実行 |
Window関連
| window.scrollTo( X , Y ); | 指定された位置へスクロール(文書先頭からの絶対座標) |
| window.scrollBy( X , Y ); | 指定された量だけスクロール(現在位置からの相対座標) |
| str = window.navigator.userAgent; | ユーザ環境の取得 |
| str = window.navigator.appName; | ブラウザ名の取得 |
| str = window.navigator.oscpu; | OS名の取得 |
| str = window.navigator.cpuClass; | CPU情報の取得 |
| num = window.navigator.hardwareConcurrency; | スレッド数の取得 |
| bool = window.Worker; | Web Workerによる並列化の可否を判定 |
| bool = window.navigator.onLine; | ブラウザの接続状態を取得, オフライン時にfalse |
| bool = window.navigator.mozIsLocallyAvailable( uri , ifOffline ); | リソースが閲覧可能かどうか判定 |
| intervalID = window.setTimeout( hoge() , ms ); | 一定時間後に関数を呼び出す |
| intervalID = window.setInterval( hoge() , ms ); | 一定の遅延間隔を置いて関数を繰り返し呼び出す |
| clearInterval( intervalID ); | 指定したIDのインターバルを停止・削除 |
| bool = navigator.vibrate( ms ); | スマートフォンのバイブレーション, 返り値は実行の有無 |
※ X:x座標, Y:y座標, bool:真偽
日時関連
| now = new Date(); | 現在の日時の取得 |
| nowYear = now.getFullYear(); | 西暦の取得 |
| nowMonth = now.getMonth() + 1; | 月の取得 |
| nowDate = now.getDate(); | 日の取得 |
| nowDate = now.getDay(); | 曜日の取得 |
| nowHours = now.getHours(); | 時間の取得 |
| nowMinutes = now.getMinutes(); | 分の取得 |
| nowSeconds = now.getSeconds(); | 秒の取得 |
| nowMilliseconds = now.getMillisecond(); | ミリ秒の取得 |
Math関連
| num = Math.random(); | [0,1)の乱数の生成 |
| num = Math.ceil( num ); | 床関数の値の取得 |
| num = Math.floor( num ); | 天井関数の値の取得 |
| num = Math.trunc( num ); | 小数点以下を切り捨てた値の取得 |
| num = Math.round( num ); | 小数点以下を四捨五入した値の取得 |
| num = Math.abs( num ) | 絶対値の取得 |
| num = Math.max( num1, num2, , , , ); | 最大値の取得 |
| num = Math.min( num1, num2, , , , ); | 最小値の取得 |
WebStorage関連
| localStorage.setItem(key, value) | データを保存 |
| localStorage.removeItem(key) | データを削除 |
| localStorage.clear() | データを全件削除 |
| str = localStorage.getItem(key) | データを取得 |
| num = localStorage.length | key数を返す |