When Will A Local Unattached DOM Element Be Garbage Collected?

dom, garbage-collection, javascript

Solution

Does removing the content in the div.innerHTML = ''; assignment also remove the references to any child nodes inside of it

It removes the `div`'s references to them, yes. Of course, if something else (such as your `result` variable) has a reference to them, that reference remains. This happens when the assignment is done, not later.

One way you can tell when those references between the `div` and its children (which are two-way) are cleared is by looking at `parentNode` on the `span` you got in `result`. Before the `div.innerHTML = '';` line, it'll be a reference to the `div`; afterward, it will be `null`:

var el = (function() {
  // Generate DOM element, but don't attach it to DOM
  var div = document.createElement('div');
  // Provide interior content
  div.innerHTML = '<span>A</span><span>B</span>';
  // Get reference to first child element in div
  var result = div.firstChild;
  console.log("result.parentNode before clearing div: " + result.parentNode);
  // Blow away all div content
  div.innerHTML = '';
  console.log("result.parentNode after clearing div: " + result.parentNode);
  // Return original first child element
  return result;
})();

If the div had been attached to the DOM instead of a local variable that went out of scope as the function exited, would it make any difference?

If the div were attached to the document, the div would be referenced by the document, and wouldn't be reclaimable. But the second `span` (`<span>B</span>`) still would be, because nothing is referencing it anymore. Even the first span's `nextSibling` reference is cleared when you wipe out the contents of `div`:

var el = (function() {
  // Generate DOM element, but don't attach it to DOM
  var div = document.createElement('div');
  document.body.appendChild(div);
  // Provide interior content
  div.innerHTML = '<span>A</span><span>B</span>';
  // Get reference to first child element in div
  var result = div.firstChild;
  console.log("result.nextSibling before clearing div: " + result.nextSibling);
  // Blow away all div content
  div.innerHTML = '';
  console.log("result.nextSibling after clearing div: " + result.nextSibling);
  // Return original first child element
  return result;
})();

Problem

Original source