javascript isConnectedでドキュメントオブジェクトモデル (DOM) に接続されているかを判定する
- 作成日 2021.04.20
- 更新日 2022.08.17
- javascript
- javascript
javascriptで、isConnectedを使用して、ドキュメントオブジェクトモデル (DOM) に接続されているかを判定するサンプルコードを掲載してます。ブラウザはchromeを使用しています。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 104.0.5112.81
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>
実行結果を見ると、接続される前は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);
サンプルコード
以下は、
「配置」ボタンをクリックして、生成した要素を配置した判定結果を表示するだけの
サンプルコードとなります。
※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>
実行結果をみると、判定した結果が変更されていることが確認できます。
-
前の記事
Vueでjsのライブラリ「bignumber.js」を使用して少数の演算を行う 2021.04.19
-
次の記事
javascript リクエスト時間やレスポンス時間を取得する 2021.04.21
コメントを書く