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 get information and verify things

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

What is a “model”?

A

It’s 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

HTML document

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

data type

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

What is a DOM Tree?

A

element + content + configuration

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() –> only use this!!!!

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 utilize it repeatedly in the future - you could put it in a variable so that you don’t have to search for it over and over as the user uses your web

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
dir = directory

dir ==> it shows EVERYThing of that specific element
console.log ==> make it all pretty vs directory

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

HTML document loads from top to bottom. It needs to load to the document before it runs the document.querySelector or else it will get a null

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

takes an argument of a string of that CSS selector and the return value is the first element that matches the selector so the second and third will not be returned.

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 as an argument returns NodeList - examples of array-like object

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

events & events handling–> we can respond to certain things –> gives interactivity
we are preparing for the response we must give when an user does certain action

event handler –> set of data of what needs to be done

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 taking a function definition and giving and moving it around to others
it’s like sharing a recipe with a friend

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 object is like bunch of data that will show what can happen
bunch of data is pushed into

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 it holds the element that it originated from
you could go to MDN to research more about it

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) vs element.addEventListener(‘click’, handleClick())

A

1st one – passing handleClick as a variable value which is a function
2nd one – we are calling an argument –> second one is WRONG. wont do it

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

To re-label the class name
value of an attribute of HTML 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

class.className = “class name (separate by space) class name”

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

child elements, can change text content

23
Q

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

A

elementName.textContent = ‘new text content as a string’

24
Q

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

A

No. Sometimes, you don’t need to use it

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 would need to do way more things

26
Q

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

A

efficiency
you aren’t making JS depend on another language to store and analyze data.
it allows JS to do everything

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

A

submit is fired when you click submit

31
Q

What does the event.preventDefault() method do?

A

prevent the default action

32
Q

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

A

it will do an action of whatever the default is

33
Q

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

A

elements

34
Q

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

A

method

35
Q

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

A

You will lose track of where it might have gone wrong and have a lot of bugs

36
Q

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

A

you can see an error that pops up if there are any

37
Q

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

A

No.

38
Q

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

A

variable.appendChild(what you want to append variable)

39
Q

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

A

name of the attribute and value

40
Q

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

A

createElement () –> store return value –> querySelector ()
–> appendChild of the new element

41
Q

What is the textContent property of an element object for?

A

set a new value

42
Q

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

A

setAttribute
.className

43
Q

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

A
  1. you can name a function
  2. it becomes reusuable
44
Q

What is the event.target?

A

reference to the object onto which the event was dispatched

where the event started

45
Q

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

A

due to event bubbling

46
Q

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

A

event.target.tagName

it shows as ALL CAPS

47
Q

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

A

The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

it travels through the elements, starting at the current argument until it finds the match of the CSS selector –> looks for something outside of it

returns the first element
very similar to querySelector is like digging inward)

48
Q

How can you remove an element from the DOM?

A

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

have an event Listener to the immediate parent element

50
Q

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

A

it takes a specific string that contains css selector and compare it to the the element that you are calling it off of it and you get a boolean true or false

51
Q

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

A

element.getAttribute()

52
Q

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

A

every step

53
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 use individual event listeners and functions for each thing

54
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 have to use a conditional block for each step (view and tab)

Web Development (10 decks)

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