What happens to unused DOM elements?

Question

Let's say I create a class that has its own canvas with:

this.canvas = document.createElement("canvas");

I use that canvas, draw some stuff, etc., but never add the canvas to the DOM tree. And when I'm done, I won't use the whole class any more.

So when I delete the class that used the canvas, does the canvas still take up memory? Do I have to delete it in some way?

Or, as a more general question: What happens to unused elements that are not in the DOM tree any more or never were (not visible in the website)? Will they be garbage collected and/or can you speed that up a bit to increase performance?

Answer 1

As you already correctly noted yourself, this is not about the DOM tree, its more about object referencing & garbage collectors.

When you delete/remove a class by nulling the base object, all modern collectors will take care of you. By not even inserting the node into the DOM you don't have to fear any hidden references aswell. I've seen several people explicitly setting the <canvas> reference to null also, but I guess this is pure IE8 paranoia.