JS DOM

Question 1

Why do we log things to the console?

Answer 1

to see the data

Question 2

What is a “model”?

Answer 2

a representation of something

Question 3

Which “document” is being referred to in the phrase Document Object Model?

Answer 3

HTML document

Question 4

What is the word “object” referring to in the phrase Document Object Model?

Answer 4

the model is made up of nodes, which are javascript objects

Question 5

What is a DOM Tree?

Answer 5

a model of a web page made up of 4 types of nodes

Question 6

Give two examples of document methods that retrieve a single element from the DOM.

Answer 6

getElementById(), querySelector()

Question 7

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 7

querySelectorAll()

Question 8

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

Answer 8

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

Question 9

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

Answer 9

console.dir()

Question 10

Why would a JavaScript tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

to allow all the HTML elements to load, before doing anything to them

Question 11

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

Answer 11

• argument is a css selector type

- returns object of first element within the document that matches

Question 12

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

Answer 12

• argument is one or more selector types

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

Question 13

What is the purpose of events and event handling?

Answer 13

events allow for triggering code based on conditions

Question 14

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

Answer 14

optional

Question 15

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

Answer 15

addEventListener()

Question 16

What is a callback function?

Answer 16

a function which is an argument of another function

Question 17

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

Answer 17

event object

Question 18

What is the event.target?

Answer 18

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

Question 19

What is the difference between these two snippets of code?

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

Answer 19

• the first method runs on ‘click’

- the second method gets the return value of undefined

Question 20

What is the className property of element objects?

Answer 20

a string containing value of class attribute, which allows you to assign a css class to an element

Question 21

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

Answer 21

className property

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

Question 22

What is the textContent property of element objects?

Answer 22

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

Question 23

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

Answer 23

textContent property

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

Question 24

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

Answer 24

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

Question 25

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

Answer 25

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

Question 26

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

Answer 26

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

Question 27

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

Answer 27

the appendChild() method

Question 28

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

Answer 28

first arg: a string for attribute name | second arg: a string for attribute value

Question 29

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

Answer 29

document.createElement(), then | use the appendChild() method on an element on the page to insert it into that element on the page

Question 30

What is the textContent property of an element object for?

Answer 30

adding text content in between the tags of an element

Question 31

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

Answer 31

elementName.setAttribute('class', 'value of the class'); | elementName.className = 'value of the class';

Question 32

What is the event.target?

Answer 32

the element which is targeted by the event

Question 33

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

Answer 33

events bubble up to an element's parents and ancestors

Question 34

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

Answer 34

tagName property (event.target.tagName)

Question 35

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

Answer 35

- argument is css selector list string | - returns element which is the closest ancestor

Question 36

How can you remove an element from the DOM?

Answer 36

the remove() method removes the element

Question 37

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?

Answer 37

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)

Question 38

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

Answer 38

argument: a selector string return: boolean

Question 39

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

Answer 39

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

Question 40

What is JSON?

Answer 40

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

Question 41

What are serialization and deserialization?

Answer 41

- 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

Question 42

Why are serialization and deserialization useful?

Answer 42

- 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

Question 43

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

Answer 43

JSON.stringify() method

Question 44

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

Answer 44

JSON.parse() method

Question 45

How to you store data in localStorage?

Answer 45

.setItem() Method | ex. localStorage.setItem('')

Question 46

How to you retrieve data from localStorage?

Answer 46

.getitem() methodex. localStorage.getItem('')

Question 47

What data type can localStorage save in the browser?

Answer 47

string

Question 48

When does the 'beforeunload' event fire on the window object?

Answer 48

before the page unloads

Question 49

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?

Answer 49

setTimeout() method

Question 50

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

Answer 50

setInterval() method

Question 51

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

Answer 51

0 milliseconds

Question 52

What do setTimeout() and setInterval() return?

Answer 52

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