Brainscape's Knowledge GenomeTM

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


See full index

LFZ Code > JavaScript DOM > Flashcards

JavaScript DOM Flashcards

1
Q

Why do we log things to the console?

A

To make sure code is working as intended.

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

What is a “model”?

A

a type of ‘recreation” of an html page, stored in memory.

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 of the DOM 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

The DOM is called an object model because the model (the DOM tree) is made of 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 model of a webpage made of objects.

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(‘id’), 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(‘element’), getElementByClass(‘’)

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

when you want to work with the same selection of elements more than once.

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 browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.

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

css selector, returns only the first of the matching elements.

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

css selector, returns a nodeList unless only one.

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 make sure our code is working as intended.

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

The event handling runs desired code when the event happens.

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() 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 callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or 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 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

The specific html element that cause the event to occur. You can check MDN for more information.

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 first one will run when the event fires.
the second one will run as the page loads, and the result will be called when the event fires.

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

tells us the current class of the object and allows us to update it.

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

getElementByClass()

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

tells us the current text content and allows us to update it.

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

use the text content property.
.textContent

25
Q

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

A

useful but not always required

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

it would be more complicated.

27
Q

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

A

it is faster and easier to get information and when never want to depend on the DOM.

28
Q

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

A

The ‘focus’ event.

29
Q

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

A

The ‘blur’ event

30
Q

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

A

the ‘input’ event

31
Q

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

A

the ‘submit’ event

32
Q

What does the event.preventDefault() method do?

A

call the preventDefault() method of the event object to prevent the browser from automatically reloading the page with the form’s values in the URL.
MDN: The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

33
Q

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

A

the default action which submits the form data to the server and reloading the page.

34
Q

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

A

.elements

35
Q

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

A

.value

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 know where your code is not working properly

37
Q

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

A

to catch code mistakes immediately.

38
Q

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

A

No, not until it is appended.

39
Q

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

A

.appendChild()
‘parent’.appendChild(‘new child’)

40
Q

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

A

the first is the attribute, the second is the value
element.setAttribute(““attribute name””, ““value””)

41
Q

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

A

document.createElement to a variable. appendChild that variable.

42
Q

What is the textContent property of an element object for?

A

to change or set the text content. or access it.

43
Q

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

A

element.setAttribute(““attribute name””, ““value””)
element.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 have access and reuse that value.

45
Q

What is the event.target?

A

target , is a property of an event which is a reference to the element upon which the event was fired.

46
Q

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

A

event bubbling

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

it takes css selector syntax as its argument, in quotes. it returns the closest parent that matches the argument.

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 to the parent.

51
Q

What is the event.target?

A

target , is a property of an event which is a reference to the element upon which the event was fired.

52
Q

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

A

It removes it from the document flow.

53
Q

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

A

it takes css selector syntax as arguments and return boolean true or false.

54
Q

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

A

element.getAttribute() method.

55
Q

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

A

at every step

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

query select the new tab, and then add another event listener to it.

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

a lot of if statements.

58
Q
A

LFZ Code (14 decks)

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