【JavaScript入門】Liveなオブジェクトと非Liveなオブジェクトの違い

セレクタを使用して要素を取得する場合、使用するメソッドやプロパティにより、Liveなオブジェクト・非Liveなオブジェクトを取得することができます。

以下では、Live・非Liveの違いについて記載しています。

1. Liveなオブジェクト

Live（動的）なオブジェクト とは、取得した要素に変更があった場合、その変更が代入先の変数にも適用されるオブジェクトです。

HTMLCollection オブジェクトが Liveなオブジェクトに該当します。

次の例は、HTMLCollection オブジェクトを返すメソッド getElementsByTagName を使用した場合の振る舞いです。

③ と ⑤ のp要素の数に注目してください。

html

<div id="div-any-p">
  <p>段落１</p>
  <p>段落２</p>
</div>

</div>

javascript

// ① 親要素を取得
var parentDiv = document.getElementById("div-any-p");

// ② 子要素のp要素を取得（HTMLCollectionオブジェクト）
var selectElems = parentDiv.getElementsByTagName("p");

// ③ 子要素Pの数を出力（p要素の数：2）
console.log("p要素の数：%d", selectElems.length);

// ④ 新たにP要素を作成し、子要素として追加
var newElementP = document.createElement("p");
parentDiv.appendChild(newElementP);

// ⑤ 子要素Pの数を出力（p要素の数：3）
console.log("p要素の数：%d", selectElems.length);

// ① 親要素を取得

var parentDiv = document.getElementById("div-any-p");

// ② 子要素のp要素を取得（HTMLCollectionオブジェクト）

var selectElems = parentDiv.getElementsByTagName("p");

// ③ 子要素Pの数を出力（p要素の数：2）

console.log("p要素の数：%d", selectElems.length);

// ④ 新たにP要素を作成し、子要素として追加

var newElementP = document.createElement("p");

parentDiv.appendChild(newElementP);

// ⑤ 子要素Pの数を出力（p要素の数：3）

console.log("p要素の数：%d", selectElems.length);

この例では、④ で新たにP要素を追加すると、変数 selectElems の内容が動的に代わり、⑤で子要素が増えていることが分かります。

このように、live（動的）なオブジェクトは、取得元を参照しているように振る舞います。

2. 非Liveなオブジェクト

非Live（静的）なオブジェクト とは、取得した後に取得元の要素に変更があっても、その変更が代入先の変数に適用されないオブジェクトです。

querySelectorAllメソッドのNodeListオブジェクトが該当します。

全てのNodeListオブジェクトが非Live（静的）な振る舞いをしない点に注意です。
例えば、Node.childNodesプロパティから返されるNodeListは、live（動的）なオブジェクトになります。

次は、querySelectorAll メソッドを使用した例です。
先ほどのliveなオブジェクトの例の getElementsByTagNameメソッドを querySelectorAllメソッドに変更した場合、次のようになります。

javascript

// ① 親要素を取得
var parentDiv = document.getElementById("div-any-p");

// ② 子要素のp要素を取得（NodeListブジェクト）
var selectElems = parentDiv.querySelectorAll("p");

// ③ 子要素Pの数を出力（p要素の数：2）
console.log("p要素の数：%d", selectElems.length);

// ④ 新たにP要素を作成し、子要素として追加
var newElementP = document.createElement("p");
parentDiv.appendChild(newElementP);

// ⑤ 子要素Pの数を出力（p要素の数：2）
console.log("p要素の数：%d", selectElems.length);

// ① 親要素を取得

var parentDiv = document.getElementById("div-any-p");

// ② 子要素のp要素を取得（NodeListブジェクト）

var selectElems = parentDiv.querySelectorAll("p");

// ③ 子要素Pの数を出力（p要素の数：2）

console.log("p要素の数：%d", selectElems.length);

// ④ 新たにP要素を作成し、子要素として追加

var newElementP = document.createElement("p");

parentDiv.appendChild(newElementP);

// ⑤ 子要素Pの数を出力（p要素の数：2）

console.log("p要素の数：%d", selectElems.length);

③ と ⑤ の結果から、Live（動的）なオブジェクトとは異なり、非Live（静的）なオブジェクトでは、取得元のDOMが変更されても、代入した変数 selectElems の内容が変わっていないことが分かります。

3. Live・非Liveなオブジェクトを返すメソッド・プロパティ

ざっくりですが、次のようになります。

Liveなオブジェクト（HTMLCollection）を返すメソッド
elem.getElementsByClassName
elem.getElementsByTagName
elem.getElementsByTagNameNS

Liveなオブジェクト（NodeList）を返すプロパティ
Node.childNodes

非Liveなオブジェクト（NodeList）を返すメソッド
elem.querySelectorAll

4. まとめ

Live・非Liveによって振る舞いが大きく違いので、セレクタを指定して要素を取得する際は、意識してメソッド・プロパティを使用することをオススメします。