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

To see if there are any bugs in the code. The browser will print errors and warnings as they occur in the JS code.

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

HTML

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 datatype object in the JS language
DOM = recreation of HTML document in the form of 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

A model of a web page. It is stored in the browser’s memory. An element plus all its configurations plus all of its 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()
only need to use querySelector().

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

Why might you want to assign the return value of a DOM query to a variable?

A

If the script needs to use the same elements more than once.

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

What console method allows you to inspect the properties of a DOM element object?

A

Dir method

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

Why would a 

 tag need to be placed at the bottom of the HTML content instead of at the top?
A

It gives the HTML time to load before the javascript load. Things load from top to bottom if the script is located at the top of the body, the JS is looking for code that hasn’t loaded yet.

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

What does document.querySelector() take as its argument and what does it return?

A

Uses a CSS selector and returns the first matching element.

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

What does document.querySelectorAll() take as its argument and what does it return?

A

Uses a CSS selector to select all matching elements. Outputs a list of nodes.

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

What is the purpose of events and event handling?

A

To make the web page more interactive. When something happens on the web page a script can respond by updating the content of the web page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
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
14
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener () method.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
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 action.

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

What object is passed into an event listener callback when the event fires?

A

An object with a huge set of properties and values that describes the event and we can change the values in the object if we want to adjust it. Since we cant pass through arguments, JS provides us with an object of everything that event is doing.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
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 reference to the object onto which the event was dispatched. The element where the event originated from.

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

What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())

A

1 ) add.EventListener will receive the arguments: string ‘click’ and a function definition for handleClick.
2) add.EventListener will receive the arguments: string ‘click’ and the return value from handleClick.

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

What is the className property of element objects?

A

Sets the value of the class attribute of the specified element.

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

How do you update the CSS class attribute of an element using JavaScript?

A

.className property.

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

What is the textContent property of element objects?

A

It allows you to update the text that is in the containing element.

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

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

A

.textContent property.

23
Q

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

A

If you want to know about the event that happened.

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

25
Q

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

A

you don’t want to keep querying through the DOM since it can be taxing. you want to store it as a variable then reference the variable to make it easier for processing purposes

26
Q

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

A

Focus Event.

27
Q

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

A

Blur Event.

28
Q

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

A

Input event.

29
Q

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

A

Submit event.

30
Q

What does the event.preventDefault() method do?

A

Prevents the browser from reloading the page.

31
Q

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

A

Reloads/refreshes the page.

32
Q

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

A

Elements property.

33
Q

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

A

Value property.

34
Q

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

A

It’s difficult to determine where the code went wrong.

35
Q

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

A

To check if your code is working or to check variable values. See if there are any bugs.

36
Q

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

A

No, it doesn’t exist on page until you use the append method.

37
Q

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

A

appendChild() method.

38
Q

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

A

Two arguments: name and value.

39
Q

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

A

createElement then append it.

40
Q

What is the textContent property of an element object for?

A

To set the text content of an element.

41
Q

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

A

Element.setAttribute(), Element.className

42
Q

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

A

Allows us to reuse the code so we don’t have to write it over. It’s also easy to test.

43
Q

What is the event.target?

A

The element that the event is taking action on/originated from.

44
Q

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

A

Bubbling

45
Q

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

A

tagName () property always in uppercase.

46
Q

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

A

It takes a css selector as an argument and returns the closest parent element.

47
Q

How can you remove an element from the DOM?

A

Remove() method.

47
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 the event listener to it’s parent. (event delegation)

48
Q

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

A

Takes a selector as a string for an argument and returns a Boolean value.

49
Q

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

A

getAttributes() method.

50
Q

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

A

Anytime you want to verify a value or to verify if the code is working correctly.

51
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

Go back and add new event listener and possibly new event handler function for each tab.

52
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

The code would have to have multiple conditions for each tab.

Web Development (6 decks)

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