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

It is a way to debug scripts and make sure scripts are running smoothly

So we can look at what we are working with

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

What is a “model”?

A

It is an imitation 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 code

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 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 parent element and all of its child elements

As a browser loads a web page, it creates a model of that page. The model is called a DOM tree, and it is stored in the browsers’ memory.

It consists of 4 types of nodes:	
Document node
Element node
Attribute node
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

getElementById()

querySelector() - uses a CSS selector, and returns the first matching object - only one we need

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

getElementByClassName()

getElementByTagName()

querySelectorAll() -only one to use

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

It is easier to re-use that element

Saves the browser looking through the DOM tree to find the same elements again. It is known as caching the selection

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(object)

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

The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.

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

returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is 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

Returns the node list of all elements

Node list is not an array

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

It is a way to debug scripts and make sure scripts are running smoothly

So we can look at what we are working with

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

Allows users to interact with the page

Our way to respond to things happening

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

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 callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

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

Event object with all the info about the event that occurred

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

Property of the event object
Points to the element where the event occured
Checking mdn

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

The className property of the Element interface gets and 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
21
Q

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

A

First get the element using a method from the document object then you use the class name object and assign a new string to it

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

The textContent property of the Node interface represents the text content of the node and its descendants.

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

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

A

First get a specific element using a query selector method from the document object. Then use the .textContent method and assign a new string to it.

24
Q

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

A

Not always useful.

Helpful to know if we are looking at an event handler function

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

JavaScript functionality should rely on data that is stored in JavaScript

26
Q

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

A

It’s easier to work with if it is stored

27
Q

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

A

The ‘focus’ event

Returns the console log of the function handleFocus()

28
Q

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

A

The ‘blur’ event

Returns the console logs within the handleBlur() function

29
Q

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

A

‘Input’

Returns the value of what is inside the form control

30
Q

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

A

The ‘submit’ event. It then calls the function created

31
Q

What does the event.preventDefault() method do?

A

Prevents the default action of the event

An example is the form refreshing the page

32
Q

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

A

Without the event.preventDefault(), it clears all of the console.log

33
Q

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

A

.elements hold an object with a named property for each form control element

34
Q

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

A

.value the property on form control elements that allows you to access the value

35
Q

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

A

You can write bad code without knowing its bad, and even build on that bad code

36
Q

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

A

You can check for mistakes and bugs as you are coding

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

.appendChild(element)

39
Q

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

A

(name, value)

40
Q

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

A

First create element using .createElement()

Then .appendChild from the element object created

41
Q

What is the textContent property of an element object for?

A

It grabs the text from that element or it changes the text if you assign a string to it

42
Q

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

A

Element.setAttribute()

43
Q

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

A

You can reuse the function
It can be done after the HTML has been created
Makes a page interactive
Easier to test because you can pass in whatever and test it that way

44
Q

What is the event.target?

A

Tells you what element you clicked on

45
Q

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

A

Due to event bubbling. Starts at a specific node and flows outwards

46
Q

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

A

element.target.tagName

Elements have a tag name property and that tells you what property it is

47
Q

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

A

The selector of the direct parent

Returns the closest ancestor

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

Add an event listener to the parent of the element and in the function have a conditional that triggers when the specific tagName is clicked

50
Q

What is the event.target?

A

event .target is where the event occurred, in this case, where it was clicked. It gives the entire element

<div>JavaScript</div>

The element that triggered the event

51
Q

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

A

Hides the content

52
Q

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

A

A string in the form of a css selector

Returns a boolean

53
Q

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

A

element.getAttribute(‘string of attribute’)

Returns value of attribute

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 have to use queryselector for a lot of elements

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

Have a variable for each .tab class and .view class

Have a bunch of if / if else statements

Web Development (4 decks)

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