javascriptを使って、htmlのDOMを取得してhtmlを操作するということはよくやると思いますが、もしDOMが取れなかった場合（取りたい対象のhtmlがなかった場合など）にそのまま処理を進めようとするとエラーになる可能性があります。
エラーになってしまうとそのあとのjsの処理が止まるので、他の処理に影響が出ます。
なので、必ず「空かどうか」「中身が入っているかどうか」というチェックをする必要があります。
そのチェック方法を紹介します。
nullとundefinedの違い
まず、空かどうかを調べる前にnullとundefinedの違いについて知っておきましょう。
javascriptにはnullとundefinedという特殊な値があります。
nullとは存在しないものの値です。
unndefinedとは定義されていないものの値です。
nullはphpなど他の言語にもあるものですが、undefinedはjs特有の値です。
似たようなものかと思いますが、以下のように探した結果が存在しない場合は「null」となり、探しもしていない未定義の場合は「undefined」となります。
|
1 2 3 4 5 6 7 8 9 10 11 |
var ele = document.getElementById('ele'); // 存在しないID属性を指定してDOMを取ったとする var func; // 未定義の変数を作る if(ele === null) console.log("ele = null"); if(ele === undefined) console.log("ele = undefined"); // この場合、ele = null と表示されるので、変数eleはnull if(func === null) console.log("func = null"); if(func === undefined) console.log("func = undefined"); // この場合、func = undefined と表示されるので、変数funcはundefined |
また以下のように、存在しないプロパティを参照した場合も「undefined」となります。
|
1 2 3 |
if(Math.test === null) console.log("Math.test = null"); if(Math.test === undefined) console.log("Math.test = undefined"); // この場合、Math.test = undefined と表示される。 |
なので、「null」とは結果として存在しない場合の値。「undefined」とは定義すらされていない場合の値ということです。
ただ変数を定義しただけだと中身にはundefinedが入り、ありもしないDOMを取得しようとするとnullが入るってことですね。
各値のtrue/false
nullとundefinedの違いがわかったところで、それぞれ色々な値がif文で判定した場合にtrue/falseどちらになるのかを見てみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
// null値のチェック if(null) console.log("if(null)=true"); if(!null) console.log("if(null)=false"); // if(null)=false // undefinedのチェック if(undefined) console.log("if(undefined)=true"); if(!undefined) console.log("if(undefined)=false"); // if(undefined)=false // Math.abs(オブジェクト)のチェック if(Math.abs) console.log("Math.abs=true"); if(!Math.abs) console.log("Math.abs=false"); // Math.abs=true // 数字(0)のチェック if(0) console.log("0=true"); if(!0) console.log("0=false"); // 0=false // 数字(1)のチェック if(1) console.log("1=true"); if(!1) console.log("1=false"); // 1=true // 数字(-1)のチェック if(-1) console.log("-1=true"); if(!-1) console.log("-1=false"); // -1=true // 文字(空文字)のチェック if('') console.log("''=true"); if(!'') console.log("''=false"); // ''=false // 文字(空白)のチェック if(' ') console.log("' '=true"); if(!' ') console.log("' '=false"); // ' '=true // 文字(空白以外)のチェック if('a') console.log("'a'=true"); if(!'a') console.log("'a'=false"); // 'a'=true |
結果をまとめるとこんな感じ。
| null | false |
|---|---|
| undefined | false |
| オブジェクト | true |
| 0 | false |
| 1 | ture |
| -1 | true |
| 空文字 | false |
| 文字(任意の1文字以上) | true |
なので、「null」「undefined」の存在チェックを行う場合は、下のようにそのまま変数やオブジェクトをif文の中に入れてやればチェックが出来ます。
|
1 2 3 4 5 6 7 |
var dom = document.getElementById('id'); if(dom){ // 存在する場合の処理 } else{ // 存在しない場合の処理 } |
jQueryの存在チェック
jQueryは、javascriptと違い単純にオブジェクトのチェックを行っても存在チェックが出来ません。
|
1 2 3 4 |
var $ele = $('#ele'); // 存在しないID if($ele) console.log("$ele = true"); if(!$ele) console.log("$ele = false"); // $ele = true |
このように存在しないIDを参照しても「$ele」は存在すると判定されちゃいます。
jQueryではたとえ、参照したIDやclassが無くてもjQueryオブジェクトが作成されるためチェックが出来ません。
なので、jQueryのチェックを行うときは要素の数を調べる「length」「size()」を使用するか、「$ele[0]」で要素そのものにアクセスしnull/undefinedを調べる必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 要素数のチェック if($ele.length) console.log("$ele.length != 0"); if(!$ele.length) console.log("$ele.length = 0"); // $ele.length = 0 // 要素数のチェック if($ele.size()) console.log("$ele.size() != 0"); if(!$ele.size()) console.log("$ele.size() = 0"); // $ele.size() = 0 // 要素がnull/undefinedかチェック if($ele[0]) console.log("$ele[0] != null/undefined"); if(!$ele[0]) console.log("$ele[0] = null/undefined"); // $ele[0] = null/undefined |
複数のチェック方法がありますが、null/undefinedのチェックでもある「$ele[0]」が最も適切です。
「$ele[0]」ならば、チェック方法がjavascriptのチェックと同じなので、js/jQuery間での同一のチェックが出来る上、各チェックの中では最も実行速度が速いチェック方法だからです。
参考：[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度
