NEW ARTICLE
Rocky Linuxでのシェルスクリプトを使用したシステム管理の自動化
  1. HOME
  2. javascript
  3. javascript 指定したhtml要素が存在するかを確認する

javascript 指定したhtml要素が存在するかを確認する

javascript 指定したhtml要素が存在するかを確認する

javascriptで、指定したhtml要素が存在するかを確認するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら

存在するかを確認

指定したhtml要素が存在するかを確認するは、html要素が「null」であるかを判定することで可能です。

if( document.getElementById("id名") !== null ){

    // htmlが存在する場合の処理

}

実際に確認して判定してみます。

<span id="hoge"></span>

<script>

let elm1 = document.getElementById("hoge")

if( elm1 !== null ) { 
    document.getElementById("hoge").textContent = "テキスト挿入";
}

let elm2 = document.getElementById("foo")

if( elm2 !== null ) { 
    document.getElementById("foo").textContent = "テキスト挿入";
}

</script>

id名「foo」は存在しないので、何も実行されません。

仮に存在チェックを使用しない場合は、以下のコードの場合はエラーが発生します。

<span id="hoge"></span>

<script>

let elm1 = document.getElementById("hoge")

document.getElementById("hoge").textContent = "テキスト挿入";

let elm2 = document.getElementById("foo")

document.getElementById("foo").textContent = "テキスト挿入";
// Uncaught TypeError: Cannot set properties of null (setting 'textContent')

</script>