JavaScript DOM Flashcards

1
Q

Why do we log things to the console?

A

Be aware of what we are doing, in DOM querys to make sure you know what element is selected.

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

What is a “model”?

A

Its a recreation

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 HTML document we are working with.

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 the elements which are objects

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

What is a DOM Tree?

A

A collection of all elements of the DOM

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

getelementbyid
queryselector

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

To reuse an element quicker

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

The HTML needs to be loaded (parsed) first so we can search for HTML elements.

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 CSS-selector as a string. returns the first match

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 CSS-selector.
Returns a node list of all elements that match.

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

So we know where we make errors and bugs, and dont have to search a page of code.

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

Events and event handling allow us to make pages interactive.

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. there are many optional parameters.

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

the addeventlistener method.

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

What is a callback function?

A

a function being called that is declared outside the current function.

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 listener object generally a function

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

The event.target shows us what the event fired on ie. what button was clicked. and you can and should console log it while building your handlers.

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

One is passing the function as a parameter and the other called the function and passes the result as the parameter.

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 accessing the class atributes 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

with element.className = new class name

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

it is all the text

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

with the el.textContent property

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 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

Much more complicated.

27
Q

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

A

Faster and easier to retrieve information

28
Q

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

A

Focus event

29
Q

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

A

Blur event

30
Q

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

A

Input event

31
Q

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

A

submit event!

32
Q

What does the event.preventDefault() method do?

A

prevents the regular actions of the event if it is not being explicitly handled.

33
Q

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

A

The page will refresh.

34
Q

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

A

the elements collection.

35
Q

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

A

the name property.

36
Q

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

A

You won’t always know at which step your bug is coming from and may have to start from scratch.

37
Q

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

A

You can know exactly what each line of codes value is by logging it and seeing what changes.

38
Q

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

A

No, it just creates it separate of the dom tree.

39
Q

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

A

with the appendChild method

40
Q

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

A

(attribute, value)
i.e (‘class’, ‘container’)

41
Q

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

A

You have to create it then
You have to append the element as a child to an already existing element.
if there was not one, append to the body.

42
Q

What is the textContent property of an element object for?

A

this is how you can insert a text value to an element.
textContent is a getter, setter, can retrieve or change.

43
Q

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

A

You can use the attribute property or the className property and the classList property.

44
Q

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

A

Allows you to dynamically change your page content through user input, and allows you to import content from other pages.
Reusable!

45
Q

What is the event.target?

A

The event target references what element was interacted with.

46
Q

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

A

Event bubbling capturing it on the way up the dom tree.

47
Q

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

A

tagName property

48
Q

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

A

takes a css selector and returns the first matching ancestor

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

Add an event listener for
for ancestors to capture all clickable descendants.

51
Q

What is the event.target?

A

The event target references what element was interacted with.

52
Q

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

A

It removes the element from the page

53
Q

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

A

it takes a css selector and returns true or false if it is present.

54
Q

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

A

getAttribute() method of the element.

55
Q

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

A

every variable, and every conditional statement, everytime you change something (though you can see changes in the html when adding or removing classes)

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 a listener to each tab.

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

Using if elses or maybe a switch.

58
Q

What is a breakpoint in responsive Web design?

A

wheen we want a media rule to kick in.

59
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

IT allows us to scale with screen size.

60
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