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 check that our code is doing what we intended for it to do

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

What is a “model”?

A

Representation of how the html page is structured

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

Datatype object (in JavaScript)

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

What is a DOM Tree?

A

Collection of html elements (like a family tree) AND all of its child elements as well as any relevant information attached to them

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 
o	getElementbyID(‘id’)
o	querySelector(‘css selector’)
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 
o	getElementsByClassName(‘class’)
o	getElementsByTagName(‘TagName’)
o	querySelectorAll(‘css selector’)
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

To allow browser to locate the element faster in the DOM (if you’re going to be using this return value 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 script tag need to be placed at the bottom of the HTML content instead of at the top?

A

Because the browser needs to read all the elements in the HTML page before JavaScript 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

It takes a STRING containing a CSS selector and returns the first DOM element object with that 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

It takes a STRING containing a CSS selector and gives a NodeList of elements.

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

What is the purpose of events and event handling?

A

To make webpages interactive

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

What is a callback function?

A

Function that you pass inside another function as an argument

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

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

A

Event object (object passed by JS that has all the information about the event that occured)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
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 read-only property that shows which object(or html element) triggered the event

Check through the console log and see which element gets logged

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

What is the difference between these two snippets of code?

  1. element.addEventListener(‘click’, handleClick)
  2. element.addEventListener(‘click’, handleClick())
A

1 has a callback function

2 has the return of the function call

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

Sets and returns the class name of a 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

By using element.className = ‘new-class-name-in-html-format’

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

Represents the text content of the node

23
Q

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

A

By using node.textContent = ‘newtext’

24
Q

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

A

No sometimes you have the information you need without the parameters

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

Complicated- because it wouldn’t be easy to tell what our current number is at

26
Q

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

A

Easy to make future updates when information is easily visible and accessible

27
Q

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

A

Focus

28
Q

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

A

Blur

29
Q

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

A

Input

30
Q

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

A

Submit

31
Q

What does the event.preventDefault() method do?

A

Prevents default action normally taken by the implementation of a method from happening

32
Q

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

A

When the submit button is clicked, the page will reload immediately

33
Q

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

A

.elements

34
Q

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

A

value

35
Q

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

A

No, because it needs to be added to the DOM for it to be visible

36
Q

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

A

.appendChild( insert new child element)

37
Q

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

A

setAttribute(‘name’, value)

38
Q

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

A 
o	Create the element: document.createElement()
o	Save(assign) element to the variable
o	Append the element into a parent node: .appendChild()
39
Q

What is the textContent property of an element object for?

A

For inserting text into a node and its children

40
Q

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

A 
o	element.ClassName = ‘whatever-class-name’
o	setAttribute('name', value)
41
Q

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

A

o You can create a bulk of html code to insert all at once

o Function can be reused

42
Q

What is the event.target?

A

Read-only property that tells you which element the event occurred (dispatched from) on

43
Q

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

A

Due to event bubbling as it continues to look up the ancestral tree

44
Q

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

A

event.target.tagName

45
Q

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

A

o Takes a string with a css selector

o Returns the closest element that matches that selector

46
Q

How can you remove an element from the DOM?

A

.remove()

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

By using an if statement to check if the event.target property is equal to the actual clicked element (mostly element but it doesn’t have to be strictly only an element – could be something else)

48
Q

What is the event.target?

A

Read-only property that tells you which element the event occurred (dispatched from) on

49
Q

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

A

It removes the element from the document flow

50
Q

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

A

o String of a css selector (in a css form)

o Gives back a Boolean value

51
Q

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

A

.getAttribute(‘string of the attribute you want to get the value of’)

52
Q

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

A

After every step

53
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’d have to write an individual function for each tab

54
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’d have to write multiple if-else statements for each views

Web Development (14 decks)

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