Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Lz-bootcamp > dom > Flashcards

dom Flashcards

1
Q

Why do we log things to the console?

A

to check for bugs and to see what things are

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

What is a “model”?

A

representation of something else

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 document node at the top of the tree

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

each node is an object with methods and properties

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

What is a DOM Tree?

A

A diagram showing parent to child and sibling relations between nodes.

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() and .geElementById()

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

.getElementsByClassName()

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 you don’t have to type the method out everytime to get the same DOM query

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

because the HTML content needs to be written before it can be called by the domquery.

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

it takes a selector and returns the first element int he document that matches the specified selector

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

it returns a nodelist that matches a group of selectors.

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 see what’s happening and know where we are

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

execute code when an event occurs- have user interaction

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 that is passed into another function as an argument which is then invoked inside the outer function to complete an action

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

the event

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

target property of the event object- holds element that was interacted with, console log event.target

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

handleclick() will run and what is returned is passed as the argument.
handleclick does not return and just runs when the click event happens

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

it is the class attribute of 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

document.queryselector().className =

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

shows the textcontent of the element

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

document.queryselector().textcontent =

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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

more complicated

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

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

A

can call the variable at multiple locations and uses

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

What does the transform property do?

A

lets you rotate, scale, skew, or translate an element

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

Give four examples of CSS transform functions.

A

rotate, scale, skew, trasnlate

30
Q

The transition property is shorthand for which four CSS properties?

A

transition-delay
transition-duration
transition-property
transition-timing-function

31
Q

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

A

focus event

32
Q

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

A

blur event

33
Q

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

A

input event

34
Q

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

A

submit event

35
Q

What does the event.preventDefault() method do?

A

prevents the default action from taking place if the event is not explicitly handled

36
Q

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

A

resets the page

37
Q

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

A

elements property

38
Q

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

A

value property

39
Q

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

A

will have a difficult time seeing where the code went wrong if it doesn’t work

40
Q

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

A

can see what is happening and see errors if they occur

41
Q

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

A

No

42
Q

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

A

append.child

43
Q

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

A

(attribute, value)

44
Q

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

A

make the element, append textnode into it if it has text, append the element to parent element on the page

45
Q

What is the textContent property of an element object for?

A

to point to the textContent of the element

46
Q

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

A

element.className =

setattribute(class, classname)

47
Q

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

A

can call multiple times to create multiple trees for different data
can have page interactions to call the function

48
Q

What is the event.target?

A

target property of the event. the object onto which the event occured. element that started the event

49
Q

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

A

event bubbling

50
Q

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

A

.tagName

51
Q

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

A

a selector. returns closest matching element

52
Q

How can you remove an element from the DOM?

A

.remove()

53
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

create a container for them that has the event listener and filters for the element nodeNames or tags

54
Q

What is the event.target?

A

target property of the event. the object onto which the event occured. element that started the event

55
Q

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

A

it is hidden. removed from page

56
Q

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

A

returns a boolean

57
Q

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

A

.getAttribute()

58
Q

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

A

Any step that something is assigned or produces a value

59
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

Would have to add an eventlistener to each tab

60
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

would have to hard code each tab[i] to check if it matched e.target and then hard code the addition or removal of classes

61
Q

What is a breakpoint in responsive Web design?

A

The points at which a media query is introduced are known as breakpoints.

62
Q

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

A

useful for different screen sizes

63
Q

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

A

css cascading overrides with the latest introduced css ruleset

64
Q

What is JSON?

A

javascript object notation

65
Q

What are serialization and deserialization?

A

Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.

66
Q

Why are serialization and deserialization useful?

A

can store objects and send them

67
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

stringify

68
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

JSON.parse

69
Q

How to you store data in localStorage?

A

localStorage.setitem()

70
Q

How to you retrieve data from localStorage?

A

localStorage.getitem()

71
Q

What data type can localStorage save in the browser?

A

JSON,

72
Q

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

A

before the window, document, and its resources unload

Lz-bootcamp (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions