Document Object Model

Question 1

Why doe we log things to the console?

Answer 1

To debug our code and make sure it works

Question 2

What is a “model”?

Answer 2

a representation of the HTML page in tree form

Question 3

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

Answer 3

The HTML document but we’re working with the byproduct of the document

Question 4

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

Answer 4

Each object represents a different part of the page loaded in the browser

Question 5

What is a DOM Tree?

Answer 5

A model of the page when it loads in a browser in the form of a tree

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

Answer 7

querySelectorAll()

Question 8

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

Answer 8

Its easier to find if the browser needs to use the same elements 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 it can create a model after the document since the browser reads it from top to bottom

Question 11

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

Answer 11

it takes in a css selector or and returns a HTML element object representing the first element in the document that matches the specified set of CSS selectors or null if there are no mtaches

Question 12

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

Answer 12

selectors and it returns a nodelist containing one element object for each element that matches at least one specific selector or an empty nodelist if none match.

Question 13

What is the purpose of events and event handling?

Answer 13

Events trigger functions in javascript code and event handling is the steps it takes for events to trigger the code

Question 14

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

Answer 14

The eventTarget.addEventListener();

Question 15

What is a call back function?

Answer 15

a function passed into another function as an argument, which is the invoked inside the outer function to complete some kind of action or routine

Question 16

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

Answer 16

the event object

Question 17

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

Answer 17

The target property of the event interface which references the object onto which the event was dispatched. console.log MDN

Question 18

What is the difference between these two snippets of code? element.addEventListener(‘click’, handleClick) element.addEventListener(‘click’, handleClick())

Answer 18

The second one fires the event when the page gets loaded and the first waits for the event to happen then fires the function

Question 19

Are all possible parameters required to use a JavaScript method or function?

Answer 19

no

Question 20

What is the className property of element objects?

Answer 20

Property of the element interface that gets and sets the value of the class attribute of the specified element

Question 21

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

Answer 21

Add the property className

Question 22

What is the textContent property of element objects?

Answer 22

Represents the text content of the node and its descendants

Question 23

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

Answer 23

textContent property

Question 24

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

Answer 24

Not always useful but will always be present and you should always have it.

Question 25

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

Answer 25

more complicated

Question 26

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

Answer 26

If you wanna do work in JS not very intuitive to go to the HTML and bring it back to do something. We want everything in one spot.

Question 27

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

Answer 27

focus

Question 28

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

Answer 28

blur

Question 29

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

Answer 29

input

Question 30

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

Answer 30

submit event

Question 31

What does event.preventDeafault() method do?

Answer 31

prevents the browser from automatically reloading with the forms values in the URL/prevents default behavior of the form

Question 32

What does submitting a form without event.preventDefault do?

Answer 32

automatically loads the form values

Question 33

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

Answer 33

the element

Question 34

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

Answer 34

the value property

Question 35

What is one risk of writing a lot of code without checking to see if its worked so far?

Answer 35

You don’t know if you ran into errors halfway through writing.

Question 36

what is the advantage of having your console open when writing a javascript program?

Answer 36

To test your code to make sure its working.

Question 37

What is the event.target

Answer 37

the target property of the event interface which is reference to the object onto which the event was dispatched

Question 38

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

Answer 38

Because of event bubbling

Question 39

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

Answer 39

element.tagName

Question 40

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

Answer 40

The selector and closestElement is the elemnt which is the closest ancestor of the selected element. It may be null.

Question 41

How can you remove an element from the DOM?

Answer 41

remove() method

Question 42

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 42

By just targeting the parent element/put it on the element that holds the element.

Question 43

What is the event.target?

Answer 43

the target property of the event interface which is reference to the object onto which the event was dispatched.

Question 44

What does the element.matches method take as its arugment and what does it return.

Answer 44

Selector string, boolean

Question 45

At what steps of the solution would it be helpful to log things to the console?

Answer 45

every step

Question 46

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

Answer 46

we’d have to use an event listener for every element.

Question 47

if you didn’t use a loop to conditionally show or hide the views in the page, how woul dyour Javascript code be written instead?

Answer 47

You’d need to write a conditional for each view.

Question 48

How can you retrieve the value of an elements attribute?

Answer 48

getAttribute() method