Are you ready?

1 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 elements is selected by document.getElementById("main")?
<section id="main"></section>

<div id="main"></div>
If two, or more, elements have the same id, then getElementById() selects the one that appears first in the markup. This goes with choice (A). See more on HTML DOM Accessing Elements - Selecting by ID.
What's the problem in the code below?
<div id="main"></div>
var ele = document.getElementByID("main");
The method's name is mistyped — document.getElementByID("main"). The 'D' is uppercased, however it's actually in lowercase. See more at HTML DOM getElementById() method.
Which of the following objects does the getElementsByClassName() method return?
getElementsByClassName() returns an HTMLCollection object. For more info, please refer to HTML DOM getElementsByClassName() method.
Assuming that there exists no .random element, what will the following code log?
var ele = document.getElementsByClassName("random");
console.log(ele);
The getElementsByClassName() method always returns an HTMLCollection object. If no element exists, the object has no items i.e it has a length of 0. For more info, please refer to HTML DOM getElementsByClassName() method.
Spot the error in the code below to select all elements with the class main:
var ele = document.getElementsByClassName(".MAIN")
When providing class names to , they should not have a period character before them. This is because it is already known that we are selecting via class, so there is no need for a period. Casing does not matter in class names. The correct choice is therefore (A). For more info, please refer to HTML DOM getElementsByClassName() method.
Both getElementsByClassName() and getElementsByTagName() return an HTMLCollection object. True or false? If, false, then choose the correct explanation.
Both the methods indeed return an HTMLCollection object. For more info, please refer to HTML DOM Accessing Elements.
The string argument passed to getElementsByTagName(), holding the name of the tag to be selected, is case-sensitive. True or false?
The argument is not case-sensitive. For example both the statements getElementsByTagName("section") and getElementsByTagName("SECTION") are equivalent. See more at HTML DOM getElementsByTagName() method.
What does the following code log?
<p>Para 1</p>
<p>Para 2</p>
<p>Para 3</p>
console.log(document.getElementsByTagName("p").innerHTML);
document.getElementsByTagName("p") returns an HTMLCollection object which has no innerHTML property on it. Hence we get undefined logged. This goes with choice (B).
Both the statements document.getElementsByTagName("p") and document.querySelectorAll("p") select the same bunch of elements. True or false?
Both the given statements select the same set of elements. For further details see HTML DOM Accessing Elements.
What does the following code log?
<div class="panel">Panel 1</div>
<section id="main">
    <div class="panel">Panel 2</div>
    <p>Some text...</p>
    <div class="panel">Panel 3</div>
</section>
var main = document.getElementById("main");
var eleList = main.getElementsByClassName("panel");

var arr = [];
for (var i = 0, len = eleList.length; i < len; i++) {
    arr.push(eleList[i].innerHTML);
}

console.log(arr.join());
eleList here holds a collection of all those elements inside #main that have the class "panel". Hence, what's logged is "Panel 2, Panel 3". This goes withh choice (C).
Which of the following objects does the querySelectorAll() method return?
querySelectorAll() returns a NodeList object. This goes with choice (A).
What does the following code log?
<p>Para 1</p>
<p>Para 2</p>
var p = document.querySelector("p")
console.log(p.innerHTML);
querySelector() selects the first matched element, which over here is the first <p> element. Hence the correct choice is (A).
document.body and document.getElementsByTagName("body")[0] return the same element node. True or false?
Both the given statements point to the same element node, which goes with choice (A)
What does document.links select?
document.links selects all <a> tags in the document. This goes with choice (B).
Which of the following HTML elements does the statement document.documentElement select?
documentElement points to the <html> element. This goes with choce (A).
What is the parentNode property of document.body equal to?
The parent element of <body> is the <html> element, and likewise the parentNode property of document.body is equal to document.documentElement. This goes with choice (B).
What does the following code log?
<section>
    <p>Some text</p>
    <div id="desc"></div>
</section>
var ele = document.getElementById("desc");
console.log(ele.parentNode.childNodes[0].nodeName);
ele is equal to the <div> element shown above. Its parentNode points to the <section> element whose first child is a text node. Hence "#text" is logged in the console. This goes with choice (A).
The childNodes property of an element node returns which type of an object?
childNodes returns all the children nodes of a given element, which don't necessarily have to be element nodes. This means that it returns a NodeList object. See more at HTML DOM childNodes property.
The previousSibling property is an alias for previousElementSibling. True or false?
previousSibling and previousElementSibling are different properties that may give different results. They are not an alias of each other. This goes with chioce (B).
The children property of an element node returns a NodeList object. True or false? If false, then give the correct explanation.
children returns only those children of a given element node that are element nodes themselves. This means that it returns an HTMLCollection object. Hence, the correct choice is (C).