指定の ID 名、クラス名を持った HTML 要素が存在しているかどうかを JavaScript で判定するテスト（自分流）

自分流に

今回は、指定の ID 名、クラス名を持った HTML 要素が存在しているかどうかの判定を JavaScript で行う内容になっています。

自分流の方法ですので、大きく間違っているかも知れませんが良ければご覧ください。

目次まで戻る

サンプル

以下の URL にサンプルページを作成してみました。

指定の ID 名、クラス名を持った HTML 要素の存在判定: https://pulogu.net/wordpress/wp-content/uploads/2023/10/id-name-and-class-name-existence-determination.html

サンプルページのソースコードは以下の内容になっています。 div 要素に ID 名とクラス名を設定してあります。

HTML :

<div id="a">id = a</div>
<div id="a">id = a</div>
<div class="b">class = b</div>
<div class="c">class = c</div>
<div class="c">class = c</div>

目次まで戻る

ID の存在判定

以下の JavaScript をウェブブラウザ「Mozilla Firefox」の開発ツールの「コンソール」タブで実行してみたいと思います。サンプルページ上で実行してみます。

function test(){

  //コンソールの内容消去
  console.clear();
    
  //変数宣言のみ
  let a;
  console.log(typeof a);//undefined
  console.log(a);//undefined
  console.log (a==undefined);//true
  console.log (a===undefined);//true
  console.log (a!=undefined);//false
  console.log (a!==undefined);//false

  //存在しない ID
  a=document.getElementById("aa");//存在しない ID
  console.log(typeof a);//object
  console.log(a);//null
  console.log (a==null);//true
  console.log (a===null);//true
  console.log (a!=null);//false
  console.log (a!==null);//false

  //存在する ID
  a=document.getElementById("a");//存在する ID
  console.log(typeof a);//object
  console.log(a);//オブジェクトが出力される
  console.log(a.toString());//[object HTMLDivElement]
  console.log (typeof a=="object");//true
  console.log (a!=undefined);//true
  console.log (a!=null);//true
  console.log (typeof a=="object"&&a!=undefined&&a!=null);//true

  //背景色を「赤」に設定
  a.style.backgroundColor="red";
  
}
test();

実行結果は以下の画像のようになりました。同じ ID が 2 つある場合、最初の要素が取得されるようですね。

目次まで戻る

class の存在判定

以下の JavaScript をコンソールで実行してみます。 getElementById は単一の要素を取得出来ましたが、 getElementsByClassName は複数の要素を取得出来るようです。

function test2(){

  //コンソールの内容消去
  console.clear();
    
  //変数宣言のみ
  let a;
  console.log(typeof a);//undefined
  console.log(a);//undefined
  console.log (a==undefined);//true
  console.log (a===undefined);//true
  console.log (a!=undefined);//false
  console.log (a!==undefined);//false
  
  //存在しないクラス名
  a=document.getElementsByClassName("bb");//存在しないクラス名
  console.log(typeof a);//object
  console.log(a);//オブジェクトが出力される
  console.log(a.length);//0
  console.log(a.toString());//[object HTMLCollection]
  console.log(a==undefined);//false
  console.log(a==null);//false

  //存在するクラス名
  a=document.getElementsByClassName("b");//存在するクラス名
  console.log(a);//オブジェクトが出力される
  console.log(a.length);//1
  console.log(a.toString());//[object HTMLCollection]
  console.log(a==undefined);//false
  console.log(a==null);//false
  console.log(a.length>0&&typeof a=="object"&&a!=undefined&&a!=null);//true  

  //背景色を「赤」に設定
  a[0].style.backgroundColor="red";

}
test2();

目次まで戻る

class=c の色を変える

class=c は要素が 2 つあるので、 .length の結果が 2 となるようです。

function test3(){

  //コンソールの内容消去
  console.clear();
    
  //存在するクラス名
  let a=document.getElementsByClassName("c");//存在するクラス名
  console.log(a);//オブジェクトが出力される
  console.log(a.length);//2
  console.log(a.toString());//[object HTMLCollection]
  console.log(a==undefined);//false
  console.log(a==null);//false
  console.log(a.length>0&&typeof a=="object"&&a!=undefined&&a!=null);//true  
  
  //背景色を「赤」に設定
  for(let b=0;b<a.length;b++){
      a[b].style.backgroundColor="red";
  }  

}
test3();

実行結果は以下のようになりました。