Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

HTML DOM - Document Fragments Quiz

Quiz 23 6 questions

Prerequisites for the quiz

  1. HTML DOM — Document Fragments
  2. All previous chapters

Are you ready?

6 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Which of the following interfaces represents document fragments?
The DocumentFragment interface represents document fragments in the DOM API. For more info, please refer to HTML DOM — Document Fragments.
Adding nodes to a document fragment triggers a page reflow. True or false?
A page reflow is when the browser performs computation of the dimensions and offsets of all elements on the HTML page so that it could make the appropriate, subsequent, graphical render of the page. Adding nodes directly to the DOM triggers the page reflow algorithm. However, adding nodes to a document fragment doesn't trigger it. Hence, the statement above is false and this goes with choice (B). For more info, please refer to HTML DOM — Document Fragments.
What does the following code log?
<div id="main"></div>
var mainElement = document.getElementById('main');
var fragment = document.createDocumentFragment();

var h1Element = document.createElement('h1');
h1Element.textContent = 'A heading';

var paraElement = document.createElement('p');
paraElement.textContent = 'A paragraph';

fragment.appendChild(h1Element);
fragment.appendChild(paraElement);
mainElement.appendChild(fragment);

console.log(fragment.childNodes.length);
When a document fragment is inserted into the DOM, all of its child nodes are moved out of the fragment into the respective node. This effectively leaves the fragment itself empty. Hence, the code above logs 0, and this goes with choice (A). For more info, please refer to HTML DOM — Document Fragments.
Which of the lines in the following code causes an error?
var fragment = document.createDocumentFragment();

var h1Element = document.createElement('h1');
h1Element.textContent = 'A heading';

fragment.appendChild(h1Element);
fragment.appendChild(document.createTextNode('Some text'));
document.querySelector('body').appendChild(fragment);

var paraElement = document.createElement('p');
paraElement.textContent = 'A paragraph';

fragment.appendChild(paraElement);
There is absolutely no error in the code above. A document fragment can be reused an arbitrary number of times, as it is reused in line 13 above. Hence, the correct choice is (A). For more info, please refer to HTML DOM — Document Fragments.
Regardless of the underlying code, the usage of document fragments these days is always guaranteed to result in faster running times. True or false?
This proposition is clearly false. As discussed in the chapter HTML DOM — Document Fragments, there might cases where using document fragments doesn't lead to faster running times, but instead to slower running times. Hence, the correct choice is (B).
Which of the following is used to create a document fragment?
document.createDocumentFragment() is used to create a document fragment. Hence, the correct choice is (C). For more info, please refer to HTML DOM — Document Fragments.