Accessing Elements in the DOM
by Kwiz
Qs
12
Difficulty
Junior
Plays
2
Record
0:51
Description

This quiz will go through the syntax, selectors and terminology needed to effectively understand how to access elements in the DOM.

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.

Most questions are based on two resources:

MDN - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model Tania Rascia's book "Understanding the DOM" - https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model

Question Preview
Choose the method that does NOT access elements in the DOM
Question Preview
What is a valid argument to pass to the document.getElementById() method?
<div id="example"></div>

document.getElementById(/* ? */);
Question Preview
You are allowed to have multiple elements with the same id on a single page
Question Preview
We can access multiple elements with the following code
document.getElementById("example");
Question Preview
When we want to access multiple elements in the DOM, we should use the class attribute
Question Preview
Which of the following methods is used to access elements by class?
Question Preview
The following code will allow us to access multiple elements and change the border style
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>

const demoClass = document.getElementsByClassName('demo');
demoClass.style.border = '1px solid orange';
Question Preview
The following code is one correct way (of several options) to access multiple elements and apply a style change
const demoClass = document.getElementsByClassName('demo');
for (i = 0; i < demoClass.length; i++) {  
  demoClass[i].style.border = '1px solid orange';
}
Question Preview
If we wanted to be less specific than accessing a class or id, we can access elements by tag. Which of the following is the correct syntax for accessing all <article> elements?
Question Preview
Which method would we use to query a single element with a CSS selector?
Question Preview
Which method would we use to select multiple elements with a CSS selector?
Question Preview
How many elements will the following method return in the array-like nodelist?
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>

document.querySelector(".element");