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.