JS DOM Manipulation and Events Flashcards

1
Q

What is the primary advantage to storing your selected elements in a variable?

A

it can be reused

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

Why might you need JS to modify the DOM after the page loads?

A

gives user interactivity

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

How can you better prepare when writing HTML for DOM manipulation in your JS code?

A

set ID and class attribues

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

What are the differences between innertext and textContent?

A

innertext will show what is seen, and textContent will give you everything

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

What datatypes are the values you remove from a text input?

A

anything you want updated

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

Why is it so important to be able to dynamically update text

A

in response to users

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

What are some of the drawbacks of HTML Event Handler Attributes?

A

code is mixed with HTML which makes the code more difficult to maintain and extend. Timing issue as well.

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

Why is the Window.event property to be avoided in new code?

A

because it changes with every event and becomes chaotic

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

Why is the Window.event property useful for finding and element which was interacted with?

A

gives us a direct channel to that element

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

What is the difference between getElementById and querySelector?

A

query selector will receive a css selector and get element by Id is only ids

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

Who passes in the event object into the handleClick callback function?

A

the JS language

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

Does a callback function require a name?

A

NO

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

What is the purpose of a loop?

A

loops checks a condition and repeats until the condition returns false.Lets you repeat functionality

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

Why might there be different kinds of loops?

A

depending on the situation. if you do not know how many times the code should run use a while loop, and if you need to run a code at a specific number of times use a for loop

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

What is the purpose of a conditional expression as it relates to loops?

A

indicator when we are finished

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

Could a loop potentially go on forever?

A

Yes

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

Could a loop never start?

A

Yes, if you don’t configure them right

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

How does a for loop differ from a while loop?

A

while loops only need the end point and for loop are useful for knowing exactly how many times you need to use it

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

What potential use cases are there for for loop?

A

for a search in a search engine. for arrays

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

Which pieces of info provided in the parenthesis for a for loop are mandatory?

A

none of them are mandatory

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

What is a for in loop?

A

loops through the properties of an object

22
Q

How do you target the value of a property in an object?

A

bracket notation

23
Q

When should you use a for in loop?

A

if you need to loop over an object

24
Q

What is the difference between the parentNode and parentElement properties?

A

parent node could be an element and could be a node or something other than an element, parent element is for elements. Parent element is what you are gonna be looking for for the most part

25
Q

Why is it important to be able to traverse the DOM?

A

allows us to find information on elements around us and to make the search more efficient. avoid white space also

26
Q

What kind of information is useful to store in custom attributes?

A

attaching data that ties that element in JS and pull the info off the element itself

27
Q

What are two ways to target elements on the DOM?

A

getElementbyId, querySelector

28
Q

What is another way to add a text node to an element other using TextContent

A

innertext, document.createtextnode, avoid innerHTML

29
Q

How do you create a HTML element using vanilla Javascript?

A

the createlement method of the document object

30
Q

Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?

A

DRY. code looks less dense and makes code processing more efficient

31
Q

Why are arrays preferred over objects for the functionality referenced in question 1?

A

because it will be in order based on the index

32
Q

Why is it important to be able to retrieve and use data from inputs?

A

our ability to communicate with the user

33
Q

Why is it dangerous to assume you have to correct data when creating element?

A

to have proper data for the proper job

34
Q

What is event bubbling?

A

for any element in HTML, if an event occurs inside that element, due to bubbling every element is also clicked. based on HTML structure and not visuals

35
Q

What is the difference between event.target and event.currentTarget?

A

target refers to node(where user clicked) , currentTarget on the opposite refers to the node on which current-event listener was attached

36
Q

What is the first argument the function setTimout takes?

A

it take a callback function as its first aregument

37
Q

If the second argument is not passed into setTimout function, what is the default value?

A

Zero

38
Q

What are some scenarios where setTimeout can be useful?

A

pop ups, see if the user is still there

39
Q

What does the setInterval function return?

A

it returns an interval ID that identifies the interval

40
Q

What arguments does the clearnInterval function take?

A

ID variable value of the setInterval

41
Q

what is the event loop?

A

it makes asyncranous doable outside of a call stack

42
Q

what does the term blocking mean?

A

execution of additional js must wait until the call stack is clear

43
Q

What is the call stack?

A

is an interpreter to keep track of its place

44
Q

which element in a website are useful to create dynamically?

A

instagram of google search.

like a div. typcally to respond to user input

45
Q

Why should you not create all elements dynamically?

A

might be harder to read html doc

46
Q

What is a modal?

A

a scripted effect that allows you to overlay a small element over a website

47
Q

What are some use cases for modals?

A

error, warning, data, confirm or prompt, chat popper

48
Q

Why does a modal usually need to occupy the entire height and width of the viewport?

A

because you dont want the user to be able to click on anything

49
Q

Give two examples of media features that you can query in an @media rule.

A

resizing images such as min-width and max-width

50
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

viewport meta tag which contains content and initial scale attributes