Are you ready?
12 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.
What is the value of
value in the code below?<div id="main" contenteditable>A div</div>var mainElement = document.getElementById('main');
var value = mainElement.getAttribute('contenteditable');When we retrieve the value of a Boolean attribute, such as
contenteditable in the code above, using the getAttribute() method, it returns back an empty string. Thus the value of value is ''. This goes with choice (A). For more info, please refer to HTML DOM — getAttribute().Which of the following are properties/methods of the
Element interface?Only
getAttribute() and classList are part of the Element interface. For more info, please refer to HTML DOM — Attributes.How many arguments does
setAttribute() require and what's the type of each argument?setAttribute() takes in 2 arguments, and both of them are meant to be strings. The first argument specifies the name of the attribute to set, while the second argument specifies its value. Hence, the correct choice is (C). For more info, please refer to HTML DOM — setAttribute().What does the following code log?
<h1 id="heading" class="text-blue">A heading</h1>var h1Element = document.getElementById('heading');
h1Element.removeAttribute('class');
console.log(h1Element.hasAttribute('class'));As the
class attribute is removed from the <h1> element, the hasAttribute() check would yield false. This goes with choice (B). For more info, please refer to HTML DOM — removeAttribute() and HTML DOM — hasAttribute().What does the following code log?
<h1 id="heading" class="text-blue" class="text-red">A heading</h1>var h1Element = document.getElementById('heading');
h1Element.removeAttribute('class');
console.log(h1Element.hasAttribute('class'));Even though there are two
In our case, when the second
Hence, the correct choice is (B) again. For more info, please refer to HTML DOM —
class attributes on the <h1> element this time, the result would still be the same as in the previous question, i.e. false. This is because the HTML parser doesn't entertain an attribute on an element which already exists on it.In our case, when the second
class attribute is encountered on <h1>, the HTML parser simply ignores it. This means that there is, in effect, only one single class attribute on <h1>.Hence, the correct choice is (B) again. For more info, please refer to HTML DOM —
removeAttribute() and HTML DOM — hasAttribute().The
classList property of element nodes is an instance of ...One of the instances of the
DOMTokenList interface is the classList property of the Element interface. Hence, the correct choice is (C). For more info, please refer to HTML DOM — classList.Which of the following methods are available on the
classList property of an element node?Only
contains(), remove() and forEach() here are the methods of classList. For more info, please refer to HTML DOM — classList.The
dataset property belongs to the Element interface. True or false?The
dataset property belongs to the HTMLElement interface, NOT to the Element interface. Thus, the proposition above is false. For more info, please refer to HTML DOM — dataset.What does the following code log?
<h1 id="heading">A heading</h1>var h1Element = document.getElementById('heading');
h1Element.dataset.listId = '700';
console.log(h1Element.hasAttribute('data-listId'));When a property is set on
Hence,
dataset, as listId above, a corresponding data- attribute is set on the underlying element node. However, there is a name conversion that happens here, as detailed in this section. In short, dataset.listId sets the data-list-id attribute on <h1>, NOT the attribute data-listId.Hence,
hasAttribute('data-listId') yields false and this goes with the choice (B). For more info, please refer to HTML DOM — dataset.What does the following code log?
<div id="main" class="text-blue">A div</div>var mainElement = document.getElementById('main');
mainElement.className += 'text-red';
console.log(mainElement.classList.contains('text-blue'));There is no typo in the code above.
In line 2, the existing
That means that there is no such class on the
class value of #main, which is 'text-blue', is concatenated to the string 'text-red', to ultimately give the string 'text-bluetext-red'. This string is set as the new value of the class attribute on #main.That means that there is no such class on the
#main element as 'text-blue', which in turn means that the log made by the code above is false. Hence, the correct choice is (B). For more info, please refer to HTML DOM — dataset.Suppose
attributeNode is an attribute node. Which of the following expressions yield true?An attribute node is based on the
Attr interface, which inherits from Node, which inherits from EventTarget, which inherits from Object. Thus, from the options shown below, instanceof would yield true with Attr, Node and Object. For more info, please refer to HTML DOM — The Attr interface.What is the value of
value in the code below?<div id="main">A div</div>var mainElement = document.getElementById('main');
mainElement.setAttributeNode(document.createAttribute('class', 'text-blue'));
var value = mainElement.getAttribute('class');The
document.createAttribute() method takes in only one argument, which is the name of the attribute to create. The value of the attribute node is to be set manually by accessing its value property. In the code above, the second 'text-blue' is useless, and the class attribute is created with an empty value. Thus when we retrieve the value of class via getAttribute(), the empty string '' gets returned. And this means that value is '', which goes with choice (B). For more info, please refer to HTML DOM — The Attr interface.
