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

our investigative mechanism, communicate with the computer and get information about it

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 how something may look

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

JavaScript Object

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

What is a DOM Tree?

A

an element plus all of it’s content and it’s configuration, plus it’s children and their content/configurations

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

document.querySelector & document.getElementById

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

document.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 that you can access it again easily

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

because it needs to parse the entire document first, which means loading all the html elements. The entire content of the html document needs to be created before you can do anything with it.

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 a css selector as a string, and the return value is the first element that javascript finds in the document that matches the css selector you passed through. return is object.

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 it’s argument and returns a nodelist which is an array-like object but isn’t necessarily an array. return is a nodelist, which is still one object.

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

for debugging, investigative mechanism

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 purpose is to prepare for a possible action the user can take and do something in response. When this happens, do this thing.

Gives the page interactivity

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

Not necessary at all times, there are optional parameters

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 that’s being passed into another function as an argument

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, which is a bunch of information about what happened, on what it happened.

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

A property that holds the element where the event originated from. To be sure what it is then you can: console.log(event.target);

the property that’s being selected by query can be different from the event.target - as that one tells you where it originated from. So it could be from an element within the element you’ve selected using queryselector. (remember bubbling)

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 is passing the handleClick function as a callback, whereas the second one is calling it right there and then - which doesn’t work.

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

the className property holds the value of the classname attribute of an html element

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

object.className = // it would be a string and any number of classes separated by spaces e.g. “blue-text underline”

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

its a property that allows you to see or change the text content of an element e.g. element.textContent = “blah blah”

24
Q

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

A

element.textContent = // new text content as a string

25
Q

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

A

most often yes, but not always.

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

more complicated, it would create a lot more steps for you to accomplish the same thing

27
Q

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

A

allows you to easily access it again later on, by keeping your data in javascript you’re also allowing yourself to have your data in javascript language rather than in other languages.

28
Q

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

A

focus

29
Q

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

A

blur

30
Q

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

A

input

31
Q

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

A

submit

32
Q

What does the event.preventDefault() method do?

A

prevents the event from doing what it would normally do, its default behavior.

33
Q

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

A

does the default actions, in terms of form submittal it would reload the whole page if you left out the preventDefault method.

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 ($theForm.elements.email.value)

36
Q

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

A

you could be writing a lot of bugs

37
Q

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

A

to catch a bug, error, etc.

38
Q

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

A

no, you still need to appendchild

39
Q

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

A

parent.appendchild(child)

40
Q

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

A

setAttribute (‘type of attribute’, ‘attribute-value’)

41
Q

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

A

create the element and assign it to a variable, querySelect the parent and store it in a variable, add any attributes, add text content, append child to parent

42
Q

What is the textContent property of an element object for?

A

to add text to an element

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 do create something (like the work of creating a DOM tree)?

A

so that you can use it multiple times, and the names of the functions help you figure out what you’re doing in that part of code.

45
Q

What is the event.target?

A

holds the element where the event occurred, or originated

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 // value is the string of the name of the element and its all caps e.g. BUTTON LI DIV

48
Q

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

A

takes a css-selector and returns the first ancestor with that class name it finds

49
Q

How can you remove an element from the DOM?

A

.remove(); for example: $variable.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

put the eventlistener at the most immediate parent, then you can use a condition to check for that element and do the actions you would like it to if the condition evaluates to true. this takes advantage of bubbling.

51
Q

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

A

it gets removed from the page or the document flow

52
Q

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

A

it takes a string of the css-selector as the parameter, and it returns a Boolean

53
Q

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

A

$element.getAttribute(‘attribute type’)

54
Q

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

A

every step

55
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 need to create an addEventListener for each tab

56
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 would have to create a conditional block for each possible view

Web Development (4 decks)

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