Brainscape's Knowledge GenomeTM

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


See full index

Web Development > JavaScript - DOM > Flashcards

JavaScript - DOM Flashcards

1
Q

Why do we log things to the console?

A

To see the values of the elements we’re accessing

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

What is a “model”?

A

representation of the actual thing, but not actually it

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

It represents the entire 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

Each node of the DOM Tree, which has 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

object modeling the document

any element within the DOM and all of its child contents

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() - this is the one to use

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

to make sure all the contents can load first

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 string of the selector type element

returns first element that matches the argument

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 of the selector type element

returns a NodeList of all elements that match the argument

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 the values of the elements we’re accessing as a visual response

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

allows us to interact with the webpage

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

addEventListener takes functions without parentheses

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

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

the element where the event occurred. Look at MDN for more info.
The element you applied event listener to

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

First one is a variable, second is a function being called (which isn’t good)

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 
used to update the value of the class attribute of whatever that element is
retrieve the current value or assign
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

assign a new value to the className property on that element

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

add or update text on an element on the page

24
Q

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

A

assign new variable or text content to the textContent property of the node object
Node.textContent = new text content

25
Q

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

A

no. Sometimes we don’t need it.

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

you’d have to calculate how many clicks every time

27
Q

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

A

You can reuse it as a variable

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’ element?

A

submit event

32
Q

What does the event.preventDefault() method do?

A

prevents the browser from automatically reloading the page with the form’s values in the URL

33
Q

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

A

refreshes the page

34
Q

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

A

elements property

use name properties named after the values of the attribute

35
Q

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

A

value property

36
Q

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

A

you might have to redo it all

after you’ve written it all, if something breaks, it would be hard to figure out what was the issue

37
Q

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

A

you can console.log each eventhandler and see what’s being fired

38
Q

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

A

no, makes nothing visual for the user

39
Q

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

A

elementNode.appendChild(newElement)

40
Q

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

A

first argument data type: string

second argument sometimes string, sometimes property

41
Q

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

A
  • var newEl = document.createElement(‘div’)
  • query the DOM for the element we wanna put in, save in a variable
  • appendchild the variable with new element we created
42
Q

What is the textContent property of an element object for?

A

setting or returning text content of a DOM

43
Q

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

A

.setAttribute()

.className

44
Q

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

A

You can reuse the function
*can use in eventListener
what if you need to use same DOM tree in multiple places

45
Q

What is the event.target?

A

property that returns where the event occurred

46
Q

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

A

event is carried forward to each ancestor chain

47
Q

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

A

.tagName

48
Q

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

A

takes css selector string, returns DOM element closest to ancestor chain that matches 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

add it to the closest parent element

delegate event to something higher up, and have it do something when event.targeted

51
Q

What is the event.target?

A

a property of the event object that returns where the event occurred

52
Q

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

A

removed from document flow

hides the element from the webpage

53
Q

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

A

takes the css selector string as the argument and returns a boolean whether it matches or not

54
Q

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

A

.getAttribute() method

element.getAttribute(attributeName)

55
Q

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

A

basically every step, check if everything you’re creating is showing up correctly

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

we’d have to create a new eventListener for every single view

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

we’d have to write each conditional statement for each one

Web Development (11 decks)

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