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 - The Node Interface Quiz

Quiz 20 17 questions

Prerequisites for the quiz

  1. HTML DOM — The Node Interface
  2. HTML DOM — Basics
  3. All previous chapters

Are you ready?

17 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.
Each node in a DOM tree inherits from which of the following interfaces?
All nodes in a DOM tree inherit from the abstract Node interface. This goes with choice (A). For more information, refer to HTML DOM — The Node Interface.
What does the following code log?
<div id="main"></div>
var mainElement = document.getElementById('main');

console.log(mainElement.childNodes[0] === mainElement.firstChild);
There are no children of the #main element, likewise, childNodes[0] would yield undefined whereas firstChild would yield null. This means that the expression becomes undefined === null, which obviously evaluates to false. This goes with choice (B). For more information, refer to HTML DOM — The Node Interface.
What does the following code log?
<div id="main">
   <p>Some text</p>
</div>
var mainElement = document.getElementById('main');

console.log(mainElement.childNodes[0] === mainElement.firstChild);
If there are children in a given element node, childNodes[0] is the same as firstChild. Hence, the correct choice is (A). For more information, refer to HTML DOM — The Node Interface.
Which of the following is a method of the NodeList interface?
Of all the options shown, only item() is a method of the NodeList interface. Hence, the correct choice is A). For more information, refer to HTML DOM — The Node Interface.
Suppose that an element node e has just one child node. What will the expression e.firstChild === e.lastChild return?
e.firstChild and e.lastChild both will resolve down to the single child node of e. Hence, the expression e.firstChild === e.lastChild returns true, and this goes with choice A). For more information, refer to HTML DOM — The Node Interface.
Suppose that an element node e has just one child node. What will the expression e.firstChild.nextSibling return?
e.firstChild will resolve down to the single child node of e. Thereafter, e.firstChild.nextSibling will resolve down to null, since the child node doesn't have any siblings. Hence, the correct choice is B). For more information, refer to HTML DOM — nextSibling and previousSibling.
Given the following markup,
<div id="main">
   <p>Some text</p>
</div>

what does the code below log?

var mainElement = document.getElementById('main');

console.log(mainElement.childNodes[0].nodeName);
Suppose that an element node e has just one child node. What will the expression e.firstChild.parentNode === e return?
e.firstChild will resolve down to the single child node of e. Thereafter, e.firstChild.parentNode will take us back to the parent of this child, which is simply e, Therefore, the expression would become e === e, which would obviously evaluate down to true. Hence, the correct choice is A). For more information, refer to HTML DOM — parentNode.
Given the following markup,
<div id="main">
   <p>Some text</p>
</div>

what does the code below log?

var mainElement = document.getElementById('main');

console.log('---' + mainElement.firstChild.nodeValue + '---');
The firstChild of mainElement above is a text node that is comprised entirely of whitespace characters (specifically, a new line followed by three spaces). The nodeValue of a text node returns back its text content. Hence, the correct choice is A). For more information, refer to HTML DOM — nodeValue.
What is the output produced by the following code:
<div id="main" style="border: 1px solid red">
   <p>Some text</p>
</div>
var mainElement = document.getElementById('main');

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

mainElement.appendChild(h1Element);
mainElement.appendChild(h1Element) adds the h1Element elmement node inside mainElement, as its last child. Hence, the correct output is the one as shown in choice A). For more information, refer to HTML DOM — appendChild().
Consider the code below:
a.insertBefore(b, c);

where a, b and c are given nodes.

Which of the following correctly describes a, b and c?

insertBefore() is called on a node inside which we want to add a new node (as its new child). The first argument is the new node while the second argument is the child node of the calling node. Hence, the correct choice is (D). For more information, refer to HTML DOM — insertBefore().
How to delete an element node e from the DOM tree?
The removeChild() method is used to remove an arbitrary node from the DOM tree. It is called on the node whose child we wish to remove. Likewise, to remove an element node e, first we need to access its parent via e.parentNode and then invoke removeChild() on this parent, passing in the node e as an argument. Hence, the correct choice is D). For more information, refer to HTML DOM — removeChild().
The cloneNode() method accepts an optional argument. True or false? If true, then state the purpose of the argument.
cloneNode() does accept an optional argument and it specifies whether the calling node shall be cloned deeply or not. Hence, the correct choice is A). For more information, refer to HTML DOM — cloneNode().
The textContent property of the Node interface is an accessor property. True or false?
As a matter of fact, all properties of the Node interface are accessor properties. By this means, the correct choice is clearly A). For more information, refer to HTML DOM — The Node Interface.
Given an arbitrary element node e, what does the following code log?
e.textContent = '';
console.log(e.childNodes.length);
Setting the textContent property of an element node to '' effectively removes all of its children. Thus, accessing the length property of its childNodes would yield back 0. This means that correct choice is A). For more information, refer to HTML DOM — textContent.
Given an arbitrary text node t, t.nodeValue and t.textContent are identical to one another. True or false?
e.textContent = '';
console.log(e.childNodes.length);
When accessed, the textContent property of an arbitrary Node instance checks if the instance is a text node. If it really is one, textContent simply returns back the value of its nodeValue property. Hence, the aforementioned proposition is true, and this goes with the choice A). For more information, refer to HTML DOM — textContent.
Given the following markup,
<div id="main" style="border: 1px solid red">
   <p>Paragraph 1</p>
</div>
<p>Paragraph 2</p>

what does the code below log?

var mainElement = document.getElementById('main');

mainElement.replaceChild(mainElement.nextSibling.nextSibling, mainElement.childNodes[0]);
The code above replaces the first child of mainElement, which is a text node, with the second <p> element shown above. Since the <p> element is part of the document, it's moved from its original location into the new one, which is inside mainElement. Hence, the correct output is the one shown in chocie C). For more information, refer to HTML DOM — replaceChild().