Brainscape's Knowledge GenomeTM

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


See full index

LearningFuze > JS DOM > Flashcards

JS DOM Flashcards

1
Q

Why do we log things to the console?

A

to see the data

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 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 model is made up of nodes, which are 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

a model of a web page made up of 4 types of 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()

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

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

to access the DOM element later in the code to manipulate it

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 JavaScript tag need to be placed at the bottom of the HTML content instead of at the top?

A

to allow all the HTML elements to load, before doing anything to 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
  • argument is a css selector type

- returns object of first element within the document that matches

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
  • argument is one or more selector types

- returns nodelist of elements within the document that matches group of selectors

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

events allow for triggering code based on conditions

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

What do [] square brackets mean in function and method syntax documentation?

A

optional

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

a function which is an argument of another function

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

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

What is the event.target?

A

target is a property which references the element which triggered the event

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?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A
  • the first method runs on ‘click’

- the second method gets the return value of undefined

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

a string containing value of class attribute, which allows you to assign a css class to an 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

className property

*example: document.querySelector(‘element-name’).className = ‘text content’;

22
Q

What is the textContent property of element objects?

A

a string of the text of an element in between the tags

23
Q

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

A

textContent property

*example: document.querySelector(‘element-name’).textContent = ‘text content’;

24
Q

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

A

not always, only when you need to access an event property directly

25
Q

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

A

in DOM, you have to query it, in variable it is easily accessible data

26
Q

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

A

it creates an element, but does not insert it into the page

27
Q

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

A

the appendChild() method

28
Q

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

A

first arg: a string for attribute name

second arg: a string for attribute value

29
Q

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

A

document.createElement(), then

use the appendChild() method on an element on the page to insert it into that element on the page

30
Q

What is the textContent property of an element object for?

A

adding text content in between the tags of an element

31
Q

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

A

elementName.setAttribute(‘class’, ‘value of the class’);

elementName.className = ‘value of the class’;

32
Q

What is the event.target?

A

the element which is targeted by the event

33
Q

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

A

events bubble up to an element’s parents and ancestors

34
Q

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

A

tagName property (event.target.tagName)

35
Q

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

A
  • argument is css selector list string

- returns element which is the closest ancestor

36
Q

How can you remove an element from the DOM?

A

the remove() method removes the element

37
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 only to the element which the DOM elements are being inserted since the event will bubble up to that parent element (aka event delegation)

38
Q

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

A

argument: a selector string
return: boolean

39
Q

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

A

getAttribute() method will return the value of a specified attribute

40
Q

What is JSON?

A

JavaScript Object Notation is a text based data-interchange format following JavaScript object syntax

41
Q

What are serialization and deserialization?

A
  • serialization is converting a data structure (such as an object) into a stream of bytes (such as a JSON string) which can then be stored
  • deserialization is converting a stream of bytes (such as a JSON String) into a data structure (such as an object) which can then be used
42
Q

Why are serialization and deserialization useful?

A
  • serialization allows for saving the state of an object (JSON.stringify())
  • deserialization allows for recreating an object in different programming languages (JSON.parse())
  • These also allow for sending or passing the object via the internet and store it in memory
43
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

JSON.stringify() method

44
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

JSON.parse() method

45
Q

How to you store data in localStorage?

A

.setItem() Method

ex. localStorage.setItem(‘’)

46
Q

How to you retrieve data from localStorage?

A

.getitem() methodex. localStorage.getItem(‘’)

47
Q

What data type can localStorage save in the browser?

A

string

48
Q

When does the ‘beforeunload’ event fire on the window object?

A

before the page unloads

49
Q

Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?

A

setTimeout() method

50
Q

How can you set up a function to be called repeatedly without using a loop?

A

setInterval() method

51
Q

What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?

A

0 milliseconds

52
Q

What do setTimeout() and setInterval() return?

A

a timeoutID/ intervalID (number), which can be passed to clearTimeout()/ clearInterval() to cancel the timeout

LearningFuze (12 decks)

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