JavaScript DocumentFragment : Node

A DocumentFragment is a container for Nodes. When adding a DocumentFragment to a Node, all the children of the DocumentFragment become direct children of the Node. Use document.createDocumentFragment() to create a DocumentFragment.

Spec

Instance Methods

querySelector(cssSelector : String) : Element

Returns the first Element that matches the CSS selector.

Example:

<span id='foo'>foo1</span>
<span class='bar'>
  <span class='baz'>baz1</span>
</span>
<span class='baz'>baz2</span>
<script>
  var fragment = document.createDocumentFragment();

  // Clone the contents of body into the fragment
  var element = document.body.firstChild;
  while (element) {
    fragment.appendChild(element.cloneNode(true));
    element = element.nextSibling;
  }

  var foo = fragment.querySelector('#foo');
  console.log(foo.innerHTML);

  var baz = fragment.querySelector('.baz');
  console.log(baz.innerHTML);
</script>

Run

Results:

Spec

querySelectorAll(cssSelector : String) : NodeList

Returns a NodeList containing the Elements in the document that match the CSS selector.

Example:

<span id='foo'>foo1</span>
<span class='bar'>
  <span class='baz'>baz1</span>
</span>
<span class='baz'>baz2</span>
<script>
  var fragment = document.createDocumentFragment();

  // Clone the contents of body into the fragment
  var element = document.body.firstChild;
  while (element) {
    fragment.appendChild(element.cloneNode(true));
    element = element.nextSibling;
  }

  var all = fragment.querySelectorAll('#foo, .baz');
  console.log(all.length);
  for (var i = 0; i < all.length; i++) {
    console.log(all[i].innerHTML);
  };
</script>

Run

Results:

Spec

home license contribute feedback