Course: JavaScript

Progress (0%)

HTML DOM - Attributes Quiz

Quiz 21 12 questions

Prerequisites for the quiz

  1. HTML DOM — Attributes
  2. All previous chapters

Are you ready?

12 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.
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 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 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 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.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage