Brainscape's Knowledge GenomeTM

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


See full index

Web Development > DOM > Flashcards

DOM Flashcards

1
Q

Why do we log things to the console?

A

to check if the code is working properly and giving the expected output

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

What is a “model”?

A

a representation of something

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

the nodes of the HTML elements, which are JS 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 the HTML page, composed of 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

.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

so you can use the variable when you need a specific element instead of querying it over and over

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 through the HTML page before JS can access anything

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

a string with a CSS selector, returns first element that matches

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

a string with a CSS selector, returns all elements that match

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

What is the purpose of events and event handling?

A

makes a page more interactive and dynamic

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

What is a callback function?

A

a function passed into another function as an argument

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

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

A

event, an object created by the browser

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

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

A

where the event originated from, console.log to check, more info from mdn

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

What is the difference between these two snippets of code?

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

A

the second one will call the function as soon as the page loads

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

What is the className property of element objects?

A

it gets and sets the value of the class attribute of an element

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

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

A

.className = ‘new-class’

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

What is the textContent property of element objects?

A

it represents the text content of the node and its descendants

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

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

A

.textContent = ‘next text content’

24
Q

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

A

no

25
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, you’d have more lines of code to retrieve the number of times a button was clicked

26
Q

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

A

more accessible

27
Q

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

A

focus

28
Q

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

A

blur

29
Q

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

A

input

30
Q

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

A

submit

31
Q

What does the event.preventDefault( ) method do?

A

stops the browser from automatically doing the default action for an event

32
Q

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

A

the browser will automatically reload the page with the form’s values in the URL

33
Q

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

A

.elements

34
Q

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

A

value

35
Q

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

A

you could make a mistake and not know which line it starts from

36
Q

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

A

you can check for logs that show the output of your code while you run it, or for any errors

37
Q

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

A

no, it just creates a node, it’s not part of the DOM tree yet

38
Q

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

A

.appendChild( )

39
Q

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

A

name, value

40
Q

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

A

.createElement( ), .appendChild( )

41
Q

What is the textContent property of an element object for?

A

to get and set the text content of a node

42
Q

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

A

.className or .setAttribute( class, value )

43
Q

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

A

you don’t have to repeat the steps of creating and adding elements, and you can pass in different data models

44
Q

What is the event.target?

A

where the event originated from

45
Q

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

A

bubbling, the event flows from child to parent elements

46
Q

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

A

.tagName ( )

47
Q

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

A

a CSS selector, the closest matching ancestor

48
Q

How can you remove an element from the DOM?

A

.remove ( )

49
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 the event listener to the parent element

50
Q

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

A

removes it from the document flow, doesn’t show up in the browser

51
Q

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

A

CSS selector, returns a boolean

52
Q

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

A

.getAttribute( )

53
Q

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

A

every step

54
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’d have to add an event listener on each tab

55
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’d have to write conditionals for each individual view

Web Development (14 decks)

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