javascript isConnectedでドキュメントオブジェクトモデル (DOM) に接続されているかを判定する

作成日 2021.04.20
更新日 2022.08.17
javascript
javascript

javascriptで、isConnectedを使用して、ドキュメントオブジェクトモデル (DOM) に接続されているかを判定するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. isConnected使い方
3. コード簡略化
4. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 104.0.5112.81

Javascript サンプル集はこちら

isConnected使い方

「isConnected」を使用すると、ドキュメントオブジェクトモデル (DOM) に接続されているかを判定することが可能です。
※ノードは、要素ノードだけでなく、改行を含んだテキストノードやコメントノードも存在します。

ノード.isConnected

isConnected使い方

<div id="main"></div>

<script>

'use strict';

const hoge = document.createElement('p');
hoge.innerHTML = "test";

console.log(hoge.isConnected); // false

document.getElementById("main").appendChild(hoge);

console.log(hoge.isConnected); // true

</script>

use strictについてはこちら

実行結果を見ると、接続される前はfalseで、接続された後はtrueが表示されていることが確認できます。

存在しないノードを指定するとエラーが発生します。

const hoge = document.createElement('p');
hoge.innerHTML = "test";

console.log(foo.isConnected); // Uncaught ReferenceError: foo is not defined

コード簡略化

また、以下のコードを、

document.getElementById("main").appendChild(hoge);

document.getElementByIdの省略を使用して、簡潔に記述することもできます。

main.appendChild(hoge);

document.getElementByIdの省略して記述する

サンプルコード

以下は、
「配置」ボタンをクリックして、生成した要素を配置した判定結果を表示するだけの
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<script>

  window.onload = () => {

    const hoge = document.createElement('p');
    result.innerHTML = hoge.isConnected;

    btn.onclick = () => {
      sample.appendChild(hoge);
      result.innerHTML = hoge.isConnected;
    };

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">
      <button id="btn"
        class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white py-2 px-4 rounded-full mb-3 mt-4">
        　配置
      </button>
      <p id="result"></p>
    </div>

  </div>
</body>

</html>

実行結果をみると、判定した結果が変更されていることが確認できます。