What is an "out of DOM" element?

Question

I'm a bit confused by DOM nodes, mostly just the terms.

Previously I thought the DOM was what I saw in my inspector, nothing more & nothing less. Now I'm aware of functions such as document.createElement() which create DOM nodes that have my document as a 'context', but do not have the document as a 'parent'. Does document.createElement() create "out of DOM nodes"?

And isn't that term a misnomer? A "node" is synonymous with a "DOM node" or "HTML Element", per my understanding. Isn't it bad naming to call something an "out of DOM node", when nodes are things in a DOM? The term seems self contradicting.

To add further confusion, there are new concepts like retaining paths, detached DOM nodes, hanging DOM nodes, shadow DOM, document fragments, etc.

Which of these terms are synonymous? Which are misnomers? And which are actual specs (bonus for linking to specs).

Answer 1

And isn't the term "out of DOM nodes" a misnomer?

No. First off, when talking about "the DOM" regarding HTML, it's referring to the HTML DOM. A node can exist in the HTML DOM or not. A node (in the sense we're talking now) is just the smallest self-containing part that CAN constitute or be part of a DOM.

As such, it could exist anywhere and still be a node. An engine is still an engine if it's detached from the car. It just not very useful until it's put in the "right" place.

A "node" is synonymous with a "DOM node" or "HTML Element", per my understanding.

A node CAN be added to the HTML DOM and it CAN be a HTML Element, but it doesn't have to be. In HTML, a text node is also a node for example. And a node can exist in a HTML document or XML document or RSS document or...

Or it could be a node which is an HTML element but exists outside the HTML DOM, only in memory for example. Which is the case when creating nodes dynamically.

Isn't it bad naming to call something an "out of DOM node", when nodes are things in a DOM? The term seems self contradicting.

Per the above, no, it's not. An engine is still an engine and a node is still a node.

To add further confusion, there are new concepts like retaining paths

"Retaining paths" has nothing to do with the DOM, but rather JavaScript. It means that as long as there's still a reference to a variable/object anywhere, that object isn't garbage collected. As soon as all methods/functions/DOM elements that are "using" the object are garbage collected, so is the object.

It's basically just about garbage collection/memory leaks. It only concerns the DOM in that everything that is in the DOM is being "used" and should be retained.

detached DOM nodes, hanging DOM nodes

"Out of DOM node" and "detached DOM node" would be the same thing, and I'm guessing "hanging DOM node" although I've never heard that one used. They all seem to imply nodes that have been removed from the DOM but are still retained in memory through JavaScript.

And these concepts aren't new, JavaScript has done this for a looong time. If they seem new it's because people talk about them more.

shadow DOM, document fragments, etc

These are clearly specced in the HTML DOM specifications. A quick answer is that Shadow DOM again is a JavaScript thingie, and it's about giving your elements a protected scope as well as separating content from rendering. Seem confusing? That's because this is an entirely new question in itself and you really should read up on it.

Some links to get you started:

http://www.w3.org/DOM/
http://www.w3.org/TR/dom/
http://w3c.github.io/webcomponents/spec/shadow/
http://www.w3.org/TR/2014/REC-html5-20141028/