Are you ready?

1 questions to solve.

  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.
How will you retrieve an element with the id "first"?
Refer to HTML DOM Accessing Elements for more info.
Select the parent of an element ele using one of the following choices.
The property parentNode points to the parent node of a given element. All other choices shown here are invalid properties. Hence, the choice (C).
Select the first element with the selector statement .main .title .t1.
The method querySelector() selects the first element that matches a given selector string. Hence, the choice (A).

Consider the code below.

<div id="t1">
    <p>A paragraph</p>
What will document.getElementById("t1").childNodes[0] return?
When an element has indentations and spaces within it before its first child element, its first child node is a text node holding these indentations and spaces. Hence, the correct choice is (A). For more info, please refer to HTML DOM Selecting Elements - childNodes.
The methods getElementsByClassName() and getElementsByTagName() both return a list of the matched elements, even if the match is for a single element.
True or false?
Both the mentioned methods always return a list of elements, even if the match is just for one element. Refer to HTML DOM Accessing Elements for more info.
What does div.className += " intro" do to the <div> element shown below, assuming it has been selected in the variable div?
<div class="a1">A div</div>
The expression div.className += " intro" will set div.className equal to "a1 intro". That is, div now has a new class "intro" to it.
Add an element node ele in the position show below. You shall assume that #div1 is saved in the variable div1 and #div2 in div2.
<div id="div1">I am Div1</div>
<!--Add ele here-->
<div id="div2">I am Div2</div>
The method appendChild() is useless here since it can add a node only at the end of an element. insertBefore() is the solution here.

The first argument of insertBefore() is the node to be added, whereas the second argument is the child before which to add. This goes with choice (D).
In which of the following ways can the value of the id attribute of an element ele be retrieved? You may assume that ele has only one attribute on it and that is id.
For a given element node, the property id points to its id attribute, attributes points to the list of all its attributes where a given attribute can be accessed via its name and its position in the element's markup.

This means that for ele, its id attribute can be accessed in all the first three ways described which goes with choice (D).
How to remove the class nav from the following element? Choose all the possible choices in relation to this example.
<p class="nav">I am Div1</p>
var p = document.getElementsByClassName("nav")[0];
Since the element has only one class, it can be removed using either of (A) or (B). Hence, the correct choice is (C). For more info, please refer to HTML DOM Attributes.
Change the content inside an element foo to the text "Changed".
Both the innerHTML and innerText properties can be used to change the content of an element. The main difference is that innerHTML supports HTML tags in the assignment string, whereas innerText escapes them.
How can you remove the highlighted element in the code below, given that it is not a child of <body>?

You may assume it has already been fetched in the variable ele.

<p>The first paragraph</p>
<!-- Remove the following paragraph -->
<p>Another paragraph</p>
The only way to remove ele is to go to its parent element using its parentNode property, and then call the removeChild() method on it. This goes with choice (A).
Which specific object does JavaScript provide to fetch data- attributes of an element?
For more details, please visit HTML DOM Attributes.
In what ways can we add the text "Hello" to an empty element node ele?
Because it's clearly specified that ele is empty i.e has no content in it, we can use any of three statements shown below to add "Hello" to it. Hence, the choice (D).
Spot the error in the code below.
<div id="article"></div>
var a = document.getElementById("article");
a.appendChild("<p>A paragraph</p>");
The method appendChild() accepts only Node objects. For more info, refer to HTML DOM Elements.