DOM

Question 1

Why do we log things to the console?

Answer 1

To check if the value given was as expected.

Question 2

What is a “model”?

Answer 2

A representation of something.

Question 3

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

Answer 3

The HTML document.

Question 4

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

Answer 4

The data type object in javascript.

Question 5

What is a DOM Tree?

Answer 5

JS Object for an html element including all of its children plus attributes and values for itself and its children.

Question 6

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

Answer 6

querySelector and getElementById.

Question 7

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

Answer 7

querySelectorAll

Question 8

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

Answer 8

To use the same element more than once.

Question 9

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

Answer 9

console.dir( )

Question 10

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

Answer 10

So the browser can parse all of the elements in the page before the javascript code can access them.

Question 11

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

Answer 11

Takes a CSS selector as an argument and returns the first element within the document that matches the selector

Question 12

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

Answer 12

Takes a CSS selector as an argument and returns a static NodeList representing the documents elements that match the selector.

Question 13

Why do we log things to the console?

Answer 13

To check if the value given was as expected.

Question 14

What is the purpose of events and event handling?

Answer 14

To create a reaction for when something occurs on a webpage.

Question 15

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

Answer 15

addEventListener( )

Question 16

What is a callback function?

Answer 16

A function that is passed into another function as an argument.

Question 17

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

Answer 17

Object with properties that contain all of the data of the event that occurred.

Question 18

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 18

The object onto which the event occurred. Console log / MDN.

Question 19

What is the className property of element objects?

Answer 19

Gets and sets the value of the class attribute of the element.

Question 20

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

Answer 20

element.className = ‘ ‘.

Question 21

What is the textContent property of element objects?

Answer 21

Allows us to get or set text content of an element.

Question 22

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

Answer 22

node.textContent = ‘ ‘

Question 23

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

Answer 23

no

Question 24

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

Answer 24

To reuse the data and to not mix HTML with Javascript code.

Question 25

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

Answer 25

No.

Question 26

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

Answer 26

appendChild( )

Question 27

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

Answer 27

DOMstring for the attribute.

Question 28

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

Answer 28

createElement, store element, query the parent element, and appendChild on parent with new element as an argument.

Question 29

What is the textContent property of an element object for?

Answer 29

gets and sets the text content of an element.

Question 30

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

Answer 30

className, and setAttrribute.

Question 31

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

Answer 31

To create something multiple times without writing the code again. Give the. code a name by. defining it in a function.

Question 32

What is the event.target?

Answer 32

The element where the event occurred.

Question 33

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

Answer 33

event bubbling

Question 34

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

Answer 34

tagName

Question 35

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

Answer 35

Takes a CSS selector as an argument and returns the closest matching element.

Question 36

How can you remove an element from the DOM?

Answer 36

.remove( )

Question 37

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 37

Add event listener to parent element.