DOM: Live Object

Where Live Object Came From

Many DOM get element methods return a live object.

• HTMLCollection is always live.
• NodeList may or may not be live.

• DOM: NodeList vs HTMLCollection

What is a Live Object

the DOM spec says:

If a collection is live, then the attributes and methods on that object must operate on the actual underlying data, not a snapshot of the data.

For example, if you use x = document.getElementsByTagName("p") and use for-loop by checking x.length, and for each iteration you add a new "p" element, it'll be a infinite loop, because the number of items (the x.length) also gets updated.

Example of Live Object

// demo of live object

const xx = document.getElementsByTagName("vwpgw");

// does not exist
console.log(xx.length === 0);

// insert a vwpgw tag into document body
document.body.appendChild(document.createElement("vwpgw"));

// the result got updated
console.log(xx.length === 1);