Brainscape's Knowledge GenomeTM

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


See full index

LearningFuze > DOM > Flashcards

DOM Flashcards

1
Q

Why do we log things to the console?

A

Things are logged to the console for testing and tracking values when running a program.

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

What is a “model”?

A

A “model” is a recreation 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 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

The JavaScript object data type. (JavaScript Objects)

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

What is a DOM Tree?

A

The DOM Tree is a model of web page that consists of four types of nodes: document, element, attribute, and text 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

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.getElementsByTagName();

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

You may need to work with the query more than once.

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

So the content of the web page can be loaded 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

A string representing the CSS selector. It returns the first element that matches the selector.

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 representing the CSS selector. It returns a node list of matching elements.

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

Things are logged to the console for testing and tracking values when running a program.

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

Events notify the program of any changes that may affect the code. Event handling takes place when an event takes place.

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. Many are optional.

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 invoked inside the outer function.

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 contains all the data about 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 event.target is whatever element the event occurred at.

Log the event.target to the console.

MDN.

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 snippet passes the callback function as a parameter to the method.

The second snipped passes the return of the function as a parameter to the method.

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 gets the or sets the value of the class attribute in the 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

By assigning the new value to the className property of the element object.

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

The textContent property gets the or sets the value of the text content in the element.

24
Q

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

A

The event parameter is not always useful because sometimes you want to make an event handler for one specific element only.

Makes it clear that it’s an event handler.

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

The assignment would be more complicated because there would be no easy way to concatenate an updated value to the paragraph element.

26
Q

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

A

Storing information in variables allow for more flexible DOM manipulation or additional calculation.

27
Q

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

A

The focus event.

28
Q

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

A

The blur event.

29
Q

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

A

The input event.

30
Q

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

A

The submit event.

31
Q

What does the event.preventDefault() method do?

A

The method prevents the default action of the event form taking place.

32
Q

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

A

The webpage will refresh and the console will reset.

33
Q

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

A

The elements property of the form object.

34
Q

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

A

The value property.*

35
Q

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

A

Increased difficulty in finding where the error(s) occurred.

36
Q

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

A

Values can be tracked for any errors.

37
Q

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

A

No, the method just creates the element.

38
Q

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

A

The .appendChild() method.

39
Q

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

A

The name of the attribute and the value of the attribute.

40
Q

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

A
  1. Create the element
    [.createElement()]
  2. Add attributes or text content if needed
    [.setAttribute() or .textContent]
  3. Add element to the parent element if needed
    [.querySelect() or .appendChild()]
41
Q

What is the textContent property of an element object for?

A

To get or set the content between the element’s opening and closing tag.

42
Q

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

A

.className or .setAttribute()

43
Q

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

A

The function can be reused and the return of a function can be use din other parts of the program.

44
Q

What is the event.target?

A

A property that returns the HTML element that the event originated from.

45
Q

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

A

Event Bubbling which starts at the the most specific node and flows outward.

46
Q

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

A

The event.target.tagName property.

47
Q

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

A

The method takes a selector in the form of a string as an argument and it returns the closest ancestor element.

48
Q

How can you remove an element from the DOM?

A

The .remove() method.

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

By applying the event listener to the parent element and checking if the event was triggered by the new element.

(Event delegation)

50
Q

What is the event.target?

A

A property that returns the HTML element that the event originated from.

51
Q

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

A

The element it is applied to will no longer appear but is not deleted.

52
Q

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

A

The method takes a selector in the form of a string as an argument and it returns a Boolean value.

53
Q

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

A

The .getAttribute() method.

54
Q

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

A

After writing the event listener: Checking to see whether clicking on a tab is firing off the event.

After writing the for loops to update the classes: Checking to see whether the class for the clicked tab is set to active.

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

Additional code would be required to update the class attribute values for the new tab and its data.

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

A long if-else statement.

LearningFuze (13 decks)

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