Document Object Model

Question 1

Why do we log things to the console?

Answer 1

to trouble shoot

Question 2

What is a “model”?

Answer 2

a replica of the original

Question 3

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

Answer 3

the whole html document

Question 4

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

Answer 4

a collection of a whole bunch of objects from js

Question 5

What is a DOM Tree?

Answer 5

a model of a web page made of objects

Question 6

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

Answer 6

document.queryselector() and getelementbyid

Question 7

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

Answer 7

because you need to save the elements in variables in order to use dir on them. Or, you have to pass the call to querySelector to the dir method. And because once we select that object we have it saved already in that variable, so if we need to acces it again we can just use the variable instead of having to use the dom again

Question 8

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

Answer 8

because you need to save the elements in variables in order to use dir on them. Or, you have to pass the call to querySelector to the dir method. And because once we select that object we have it saved already in that variable, so if we need to acces it again we can just use the variable instead of having to call the dom element again

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

because the html elements needs to load first

Question 11

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

Answer 11

a css selector as a string or the element selector as its string and it returns the first one it encounters, or null if theres nothing

Question 12

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

Answer 12

a css selector as a string or element and it returns all the elements that match

Question 13

What is the purpose of events and event handling?

Answer 13

to listen for things like clicks, hover etc

Question 14

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

Answer 14

no,make sure their available as needed, but dont have to use

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

event object

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 is the element thats was interacted with and mdn

Question 19

What is the difference between these two snippets of code?

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

Answer 19

first one the second argument is the function and in the second one is going to call the argument automatically and it will ignore the first argument

Question 20

What is the className property of element objects?

Answer 20

it represent the class attribute of the element

Question 21

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

Answer 21

using the classname property or classlist since it only adds or removes specific classes

Question 22

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

Answer 22

more complicated

Question 23

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

Answer 23

its faster when you need to re use it

Question 24

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

Answer 24

text content property

Question 25

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

Answer 25

not always sometimes you don to have to use it

Question 26

what is hoisting

Answer 26

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.

Question 27

what is the purpose of .target

Answer 27

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

Question 28

where will children appear in the dom (incase you want to overlay something)

Answer 28

children will always be on top of their parent elments and siblings will be next to each other

Question 29

do the event target listener functions always need and if statement
EXAMPLE:
$orangeButton.addEventListener(‘click’, normal);

Answer 29

no as long as you specify what happens inside once the event is runned it should work
EXAMPLE:
function normal(event) {
  $popUp.classList.add('hidden');
  $popUp.classList.remove('black');

}

Question 30

what is event bubbling

Answer 30

Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object.

Question 31

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

Answer 31

focus

Question 32

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

Answer 32

blur

Question 33

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

Answer 33

input

Question 34

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

Answer 34

submit event

Question 35

What does the event.preventDefault() method do?

Answer 35

cancels the event meaning that any default action normally taken by the implementation as a result of the event will not occur.

prevents page from reloading

Question 36

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

Answer 36

refreshes the page

Question 37

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

Answer 37

element
using
document.forms

Question 38

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

Answer 38

no it only creates it

Question 39

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

Answer 39

with appendchild() method

Question 40

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

Answer 40

name and value

Question 41

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

Answer 41

create element, give it content, and then appendchild

Question 42

What is the textContent property of an element object for?

Answer 42

it adds text content to it

Question 43

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

Answer 43

setAttribute, classname, classlist

Question 44

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

Answer 44

its reusable

Question 45

What is the event.target?

Answer 45

the element in where the event is being fired upon

Question 46

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

Answer 46

event bubbling

Question 47

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

Answer 47

.tagname
Example:
event.target.tagname

Question 48

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

Answer 48

it takes a selector and returns the closest element with that tag

Question 49

How can you remove an element from the DOM?

Answer 49

remove() method

Question 50

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 50

put a listener on the parent

Question 51

what is event delegation

Answer 51

Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent

Question 52

What is the event.target?

Answer 52

the element where the user interacted with

Question 53

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

Answer 53

it removes it from the document flow and hides it

Question 54

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

Answer 54

a selector string returns a boolean telling you if it matches the selector

Question 55

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

Answer 55

get attribute method

Question 56

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

Answer 56

all the time

Question 57

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 57

an event listener on each of the elements and a bunch more functions

Question 58

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 58

make alot of conditional statements