DOM

Question 1

What is a “model”?

Answer 1

A representation of something that focuses on the relevant characteristics of said thing

Question 2

Which “document” is being referred to in the phrase Document Object Model?

Answer 2

The html element being loaded by the browser

Question 3

What is the word “object” referring to in the phrase Document Object Model?

Answer 3

The JavaScript object that the browser creates to model the html element

Question 4

What is a DOM Tree?

Answer 4

The hierarchy of element nodes in the document object

Question 5

Give two examples of document methods that retrieve a single element from the DOM.

Answer 5

.querySelector(), .getElementById()

Question 6

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 6

.querySelectorAll(‘selector’)

Question 7

Why might you want to assign the return value of a DOM query to a variable?

Answer 7

It allows the script to reuse the node without having to query for it every time, saving on computation

Question 8

What console method allows you to inspect the properties of a DOM element object?

Answer 8

console.dir()

Question 9

Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 9

Placing it at the top would mean all of the script is run before any of the body elements are loaded

Question 10

What does document.querySelector() take as its argument and what does it return?

Answer 10

argument: selector string
return: first element node with the matching selector

Question 11

What does document.querySelectorAll() take as its argument and what does it return?

Answer 11

argument: selector string
return: a NodeList of all element nodes that match the selector

Question 12

What is the purpose of events and event handling?

Answer 12

They allow the web page to react to situational events that occur in real time

Question 13

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 13

.addEventListener(‘event’, function)

Question 14

What is a callback function?

Answer 14

A function passed as an argument into another function, which can then be used by the other function

Question 15

What object is passed into an event listener callback when the event fires?

Answer 15

An event object containing the details (e.g. mouse location) of the event, that was created by the browser right when the event fires

Question 16

What is the event.target?

Answer 16

The most immediate element node that was interacted with when the event triggers

Question 17

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

Answer 17

The former uses a callback function while the latter calls the function handleClick immediately when the line is read

Question 18

What is the className property of element objects?

Answer 18

It is the string value of the element’s class attribute

Question 19

How do you update the CSS class attribute of an element using JavaScript?

Answer 19

Set element.className to a new string value

Question 20

What is the textContent property of element objects?

Answer 20

It is a string of the element’s text content

Question 21

How do you update the text within an element using JavaScript?

Answer 21

Set element.textContent to a new string value

Question 22

Is the event parameter of an event listener callback always useful?

Answer 22

No, sometimes the event is only meant to trigger other actions

Question 23

Why is storing information about a program in variables better than only storing it in the DOM?

Answer 23

It allows the information to be modified by only modifying the variables

Question 24

What event is fired when a user places their cursor in a form control?

Answer 24

focus

Question 25

What event is fired when a user’s cursor leaves a form control?

Answer 25

blur

Question 26

What event is fired as a user changes the value of a form control?

Answer 26

input

Question 27

What event is fired when a user clicks the “submit” button within a form?

Answer 27

submit

Question 28

What does the event.preventDefault() method do?

Answer 28

It prevents the event from executing its default actions (e.g. the event submit will no longer reset the form)

Question 29

What does submitting a form without event.preventDefault() do?

Answer 29

The form will get reset

Question 30

What property of a form element object contains all of the form’s controls.

Answer 30

.elements

Question 31

What property of a form control object gets and sets its value?

Answer 31

.value

Question 32

Does the document.createElement() method insert a new element into the page?

Answer 32

No, it only returns a new node

Question 33

How do you add an element as a child to another element?

Answer 33

.appendChild(childNode)

Question 34

What do you pass as the arguments to the element.setAttribute() method?

Answer 34

nameOfAttribute, valueOfAttribute

Question 35

What steps do you need to take in order to insert a new element into the page?

Answer 35

Create the element, query the DOM for a parent element, append the new element to the parent element

Question 36

What is the textContent property of an element object for?

Answer 36

It allows you to get and set the element’s text content

Question 37

Name two ways to set the class attribute of a DOM element.

Answer 37

Modify the property .className or use the method .setAttribute(‘class’, ‘value’)

Question 38

What are two advantages of defining a function to create something (like the work of creating a DOM tree)?

Answer 38

It allows you to scale the task and makes the function reusable in other situations

Question 39

Why is it possible to listen for events on one element that actually happens in its descendent elements?

Answer 39

Through event bubbling, clicking on an element means simultaneously clicking on it’s ancestors

Question 40

What DOM element property tells you what type of element it is?

Answer 40

.tagName

Question 41

What does the element.closest() method take as its argument and what does it return?

Answer 41

It takes a CSS selector in string form as an argument and returns the nearest ancestor that satisfies the selector

Question 42

How can you remove an element from the DOM?

Answer 42

.remove()

Question 43

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

Answer 43

Apply the listener to the parent element and set a condition in the handler function for whenever the target is the desired element

Question 44

What is the affect of setting an element to display: none?

Answer 44

The browser will render the page as if the element and all it’s descendent elements were not there

Question 45

What does the element.matches() method take as an argument and what does it return?

Answer 45

It takes a CSS selector in string form as an argument and returns a boolean on whether or not the element satisfies the selector

Question 46

How can you retrieve the value of an element’s attribute?

Answer 46

.getAttribute(‘attribute’)

Question 47

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

Answer 47

You would need to query for that tab and add another event listener for a click on that tab

Question 48

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

Answer 48

You would need to write a conditional for each tab with a line of code addressing each tab per conditional