Dom manipulation Flashcards

1
Q

Why do we log things to the console?

A

To check them

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is a “model”?

A

a version of the page in memory structured to be a DOM tree

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

the web page / the tree structure for the web page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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

A

all HTML tags make up the DOM tree as it sees tags as objects / all elements that go into the DOM tree

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is a DOM Tree?

A

it is made up of all the HTML tags / how the DOM structures the model of the web page / kinda like an organization chart CEO at top and alot of workers at the bottom

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

querySelector / getElementById

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

querySelectorAll

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

so it doesn’t have to be searched for every time you want to use it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

console.dir

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

so all the HTML loads before it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

takes a string or css selector / returns the first matching element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

takes a string or css selector / returns all the matching elements as a NodeList

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Why do we log things to the console?

A

to check them

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the purpose of events and event handling?

A

so we know what the user is doing and how to handle it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

no

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

addEventListener

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is a callback function?

A

function passed into another function as an argument

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

A

event object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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

A

check by using console.log / console.dir / or mdn
reference to the object onto which the event was dispatched.
element that is being interacted with

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the difference between these two snippets of code?

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

A

the bottom code calls the function as soon as it loads instead of by the user or when the event is triggered

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the className property of element objects?

A

className is the attribute for the element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

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

A

with the className property and the assignment operator / without = you would just get a list and can log it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the textContent property of element objects?

A

The textContent property allows you to
collect or update just the text that is in the
containing element (and its children).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

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

A

by changing the textContent property of an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

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

A

Not always useful or needed

26
Q

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

A

maybe a little bit harder as you couldn’t visually see how many clicks have been done

27
Q

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

A

So you can can update them as you go on

/ so you dont have to keep calling on the DOM

28
Q

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

A

focus

29
Q

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

A

blur

30
Q

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

A

input

31
Q

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

A

submit

32
Q

What does the event.preventDefault() method do?

A

prevents the event from being handled with its default behavior

33
Q

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

A

reloads the page and erases the info in the form

34
Q

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

A

elements

35
Q

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

A

the value property

36
Q

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

A

that you don’t know what is it that isn’t working

37
Q

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

A

you can check as you go along and debug

38
Q

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

A

No it only creates an element

39
Q

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

A

append child

40
Q

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

A

2 params the first is the attribute and the second is the value

41
Q

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

A

create the element, set attributes if any, add text content and then append it

42
Q

What is the textContent property of an element object for?

A

to add text to the newly created element

43
Q

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

A

with setAttribute / classList / className

44
Q

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

A

to procedurally create multiple elements and add them to a page.
to dynamically create elements on a page

45
Q

What is the event.target?

A

what is being target / element that the user interacted with

46
Q

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

A

event bubbling / goes up to see if an eventListener is added to any of the parents

47
Q

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

A

event.target.tagName

48
Q

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

A

a selector and returns the closest element with the selector

49
Q

How can you remove an element from the DOM?

A

element.remove()

50
Q

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?

A

adding it to a parent / container

51
Q

What is the event.target?

A

what is being target / element that the user interacted with

52
Q

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

A

it doesnt display / doesnt show up

53
Q

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

A

a selector and returns a boolean value (checks if what your checking matches what your returning)

54
Q

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

A

element.getAttribute

55
Q

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

A

at every step so you know if your making a mistake

56
Q

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?

A

you would have to add an eventListener to every tab that you have and will add

57
Q

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?

A

you would have many more if statements to check for each tab/view and add more if you add more on the page

58
Q

How to you store data in localStorage?

A

with localStorage.setItem(key,value)

59
Q

How to you retrieve data from localStorage?

A

with localStorage.getItem(key)

60
Q

What data type can localStorage save in the browser?

A

JSON strings

61
Q

When does the ‘beforeunload’ event fire on the window object?

A

if the user tries to leave the page

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.