Given a fragment of nodes [3, 4, 5] within a larger list of childNodes [1, 2, [3, 4, 5], 6]; Consider the fragment is within a <div>
node, the <div>
node would have the childNodes 1, 2, 3, 4, 5, 6
where between 3-to-5 marked the implied boundary of the fragment.
Removing a child in the fragment i.e 4 will result in the transitioning the fragments parentNodes(div
) childNodes to 1, 2, 3, 5, 6
and the fragment to 3, 5
. As far as the fragments children are concerned their parentNode is the fragments parentNode and as far as the parentNode’s childNodes are concerned the fragments childNodes are also it’s childNodes; As such removing the fragment would also result in the parentNode(div
) loosing the childNodes marked under the fragments boundary.
As such the FragmentNode forms a set of childNodes that you can used as a references to insert/remove/append/clone a set/collection of related Nodes represented by a transparent boundary that is the FragmentNode.
Like DocumentFragment this can be implemented in user-land but there-in comes the guarantee and convenience of a single transparent FragmentNode structure that can manage this for you.