Document Object Model

Question 1

Why do we log things to the console?

Answer 1

to check our work

Question 2

What is a “model”?

Answer 2

a recreation used to recreate the HTML page

Question 3

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

Answer 3

The document node, which includes the whole html itself

Question 4

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

Answer 4

it refers to each node being an object itself, which are JS objects

Question 5

What is a DOM Tree?

Answer 5

a model of a webpage consisting of all of the elements and their nodes from parent elements downwards. A DOM tree can be the whole html page or just a small section of it.

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 refer to it and / or update it later using JavaScript

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 tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

the browser needs to parse all the elements BEFORE the JS file can access them, so the JS file needs to go on the bottom

Question 11

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

Answer 11

it takes in a DOM string and returns an HTML object with the first class/id/name that it finds in your HTML with all its child contents

Question 12

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

Answer 12

a DOM string and selectors to match and returns a NODE LIST containing an element object for each element that matches your search query

Question 13

What is the purpose of events and event handling?

Answer 13

to respond in certain ways, or run certain codes/scripts when a user event happens, such as when they click/type/hover over something

Question 14

What do [] square brackets mean in function and method syntax documentation?

Answer 14

it means they are optional and can be left out

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 in as an argument of another function, which will be ran later.

Question 17

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

Answer 17

the function object that was defined prior

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

it means the target that will trigger the event if it was acted on aka it is a reference to the object on which the event was dispatched. event.target gives you all the information about that target. Search MDN for more info if needed.

Question 19

What is the difference between these two snippets of code?

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

Answer 19

In the first code, the handleClick function will not run until the button is clicked.

The second code is being called right away and handleClick() will run before the button is even clicked by the user.

Question 20

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

Answer 20

focus

Question 21

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

Answer 21

blur

Question 22

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

Answer 22

input

Question 23

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

Answer 23

submit

Question 24

What does the event.preventDefault() method do?

Answer 24

stops the browser from implementing its default submit method

Question 25

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

Answer 25

the browser will proceed with its default submission methods, either post or get

Question 26

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

Answer 26

elements property

Question 27

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

Answer 27

value

Question 28

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

Answer 28

the missed errors will stack up, it would be way harder to debug

Question 29

What is an advantage of having your console open when writing a JavaScript program?

Answer 29

you can check your work step by step if needed!

Question 30

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

Answer 30

No, it creates it internally

Question 31

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

Answer 31

AnotherElement.Appendchild ( elementToAdd)

Question 32

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

Answer 32

it takes 2 arguments (‘name of your atr’, ‘value of atr’)

Question 33

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

Answer 33

1) create
2) edit content/attribute if needed
3) append to where you want

Question 34

What is the textContent property of an element object for?

Answer 34

for us to view the text content of that element

Question 35

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

Answer 35

1) element.setAttribute ( )

2) element.setAttributeNode ( )

Question 36

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

Answer 36

1) the variables created during the function’s execution will be gone afterwards (save memory)
2) so YOU dont have to create it, saves time and prevent human errors

Question 37

What is the event.target?

Answer 37

element from where the event was fired

Question 38

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

Answer 38

browser will NOT render the element with that property at all.

Question 39

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

Answer 39

it takes a string and returns a boolean

Question 40

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

Answer 40

element.getAttribute

Question 41

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 41

You would need to add an eventListener to each element required individually

Question 42

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

Answer 42

by using dom delegation. you can set conditionals to see if the user clicks on any descendent elements

Question 43

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

Answer 43

.tagName

Question 44

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

Answer 44

it takes a CSS Selector string argument, and returns the element which is CLOSEST to your selected element

Question 45

How can you remove an element from the DOM?

Answer 45

element.remove ( )

Question 46

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 46

by using dom delegation!