Are you ready?
14 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- 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 expressions can be used to select the element with the HTML attribute
id="first"?Both the methods,
getElementById() and querySelector(), of the document object can be used to select an element with a given HTML id value. Refer to HTML DOM Accessing Elements for more info.Suppose that
ele is an element node. Select all the expressions below which can be used to select the parent node of ele.The property
parentNode points to the parent node of a given element. All other choices shown here are invalid properties. Hence, the choice (C).How to select the first element in an HTML document matching the CSS selector
.main .title .t1?The
querySelector() method of the document object selects the very first element that matches a given selector string (provided as an argument to the method). Hence, the correct choice is (A). For more info, refer to HTML DOM — Selecting Elements.Consider the code below:
<div id="t1">
<p>A paragraph</p>
</div>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 — The
Node Interface — childNodes.The methods
getElementsByClassName() and getElementsByTagName(), of the Node interface, both return an array-like list of the matched elements, even if the match is for a single element. True or false?Both the aforementioned methods always return a list of elements, even if the match is for just one element. Refer to HTML DOM — Selecting Elements for more info.
Consider the following HTML:
<div class="a1">A div</div>Now consider the following JavaScript where divElement is assumed to be holding the <div> element shown above:
divElement.className += ' intro';What does this JavaScript code do to the
<div> element?The expression
div.className += " intro" will set div.className equal to "a1 intro". That is, div now has a new class "intro" to it.Consider the following HTML:
<div id="div1">I am Div1</div>
<div id="div2">I am Div2</div>How to add an element node
element before the #div2 element and after the #div1 element shown above?You shall assume that #div1 is saved in the variable div1Element and #div2 in div2Element.
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 of the calling node before which to add the new node. Hene, the correct choice is (D). For more info, refer to HTML DOM — The Node Interface — insertBefore().In which of the following ways can the value of the HTML
id attribute of an element node element be retrieved?You may assume that element has only one attribute on it and that is id.
For a given element node, its
This means that for
id property directly holds the value of its HTML id attribute. Similarly, the attributes property holds a list of all its attributes, whereby a given attribute can be accessed via its name or its position in the element's markup.This means that for
element, its id attribute can be accessed in all of the following three ways. For more info, refer to HTML DOM — Attributes.How to remove the
'p1' class from the following element? Choose all the possible choices.You may assume that the element is already selected in the variable paraElement.
<p class="p1">A simple paragraph</p>var p = document.getElementsByClassName("nav")[0];Since the element has only one class, it can be removed using either of (A), (B) and (C). For more info, please refer to HTML DOM — Attributes.
In which of the following ways could we change the content of an element node
divElement to the text 'Changed'?Both the
For more info, refer to HTML DOM — Elements and HTML DOM — The
innerHTML and innerText properties can be used to change the content of an element to a given string value. The main difference is that innerHTML parses HTML tags in that string, whereas innerText escapes them. Hence, (A) and (B) are correct. As for choice (D), it doesn't replace the content of the element; instead, it just adds the text to its end which is not what we desire.For more info, refer to HTML DOM — Elements and HTML DOM — The
Node Interface — document.createTextNode().How could we remove the highlighted element in the code below, given that it's not a child node of
<body>?You may assume that the element has already been selected in the variable paraElement.
<p>A paragraph</p>
<!-- Remove the following paragraph -->
<p>Another paragraph</p>The only way to remove
paraElement is to go to its parent element using its parentNode property, and then call the removeChild() method on it, removing its paraElement child. This goes with choice (B). For more info, refer to HTML DOM — The Node Interface — removeChild().Which of the following is a property available on element nodes that allows us to specifically work with HTML
data- attributes on them?The
dataset property available on element nodes, provided via the HTMLElement interface, allows us to specially work with HTML data- attributes on them. For more info, refer to HTML DOM — Attributes.In which of the following ways could we add the text
'Hello' to an empty element node divElement?Since it's clearly specified that
For more info, refer to HTML DOM — Elements and HTML DOM — The
divElement is empty, i.e. has no content in it, we can use any of three statements from (B), (C) and (D) to add the text 'Hello' inside it. As for choice (A), setting the nodeValue property doesn't have any effect for element nodes.For more info, refer to HTML DOM — Elements and HTML DOM — The
Node Interface.Spot the error in the code below.
<div id="d1"><div>var divElement = document.getElementById('d1');
divElement.appendChild('<p>A paragraph</p>');
