Node: isConnected プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

isConnectedNode インターフェイスの読み出し専用のプロパティで、ノードが Document オブジェクトに(直接的または間接的に)接続されているかどうかを示す論理値を返します。

論理値で、 true はこのノードが関連するコンテキストオブジェクトに接続されていることを表し、 false は接続していないことを表します。

標準 DOM

標準 DOM の例です。

js
let test = document.createElement("p");
console.log(test.isConnected); // Returns false
document.body.appendChild(test);
console.log(test.isConnected); // Returns true

シャドウ DOM

シャドウ DOM の例です。

js
// シャドウルートを生成
const shadow = this.attachShadow({ mode: "open" });

// いくらかの CSS を作成してシャドウ DOM に適用
const style = document.createElement("style");
console.log(style.isConnected); // returns false

style.textContent = `
.wrapper {
  position: relative;
}

.info {
  font-size: 0.8rem;
  width: 200px;
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  background: white;
  border-radius: 10px;
  opacity: 0;
  transition: 0.6s all;
  positions: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 3
}
`;

// 生成された style 要素をシャドウ DOM に取り付ける

shadow.appendChild(style);
console.log(style.isConnected); // Returns true

仕様書

Specification
DOM
# ref-for-dom-node-isconnected①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
isConnected

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報