DOM

Question 1

Why do we log things to the console?

Answer 1

Powerful tool for debugging and an easy way to inspect your variables in the browser

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

A JavaScript object modeling the HTML document’s content

Question 5

What is a DOM Tree?

Answer 5

Tree structure of nested nodes (element, text, comment), like a family tree that shows the relationship between parents, children, and siblings.

Question 6

Give two examples ofdocumentmethods that retrieve a single element from the DOM.

Answer 6

querySelector() - uses a CSS selector, and returns the first matching element

getElementById() - uses the value of an element’s id attribute (which should be unique within the page)

**querySelector() only one needed, consistency

Question 7

Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.

Answer 7

querySelectorAll() - uses a CSS selector to select all matching elements

getElementsByClassName() - selects all elements that have a specific value for their class attribute
getElementsByTagName() - selects all elements that have the specified tag name

Question 8

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

Answer 8

Caching the selection - If your script needs to use the same element(s) more than once, you can store the location of the element(s) in a variable
Storing the location of the element(s) within the DOM tree in a variable

Question 9

Whatconsolemethod allows you to inspect the properties of a DOM element object?

Answer 9

console.dir() - displays an interactive list of the properties of the specified JavaScript object, the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of the child objects

Question 10

Why would atag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

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

Question 11

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

Answer 11

A string containing a CSS selector syntax that would select one or more elements
Returns only the first of the matching elements

Question 12

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

Answer 12

A string containing CSS selector syntax to select one or more elements
Returns all of those that match in a NodeList (array-like object)

Question 13

What is the purpose of events and event handling?

Answer 13

Events -an action that occurs as a result of the user or another source, like a mouse click
Event handing - a routine that deals with the event, allowing a programmer to write code that is executed when the event occurs

Question 14

Are all possible parameters required to use a JavaScript method or function?

Answer 14

No

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(type, listener, options);

addEventListener(type, listener, useCapture);

Question 16

What is a callback function?

Answer 16

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

Question 17

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

Answer 17

Event object - creates an object from scratch in the moment that contains all the data about that event, unique data about a specific occurrence organized as an object for ease of access to data about that event

Question 18

What is theevent.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 18

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched, where the event originated
Console.log and inspect or MDN

Question 19

What is the difference between these two snippets of code?

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

Answer 19

handleClick is a callback function that will execute when the event happens
handleClick() executes when that line is parsed and returns a value with no arguments

Question 20

What is theclassNameproperty of element objects?

Answer 20

Property containing the value of the class attribute on that element
Gets and sets the value of the class attribute of the specified element

Question 21

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

Answer 21

element.className = newValue

Question 22

What is thetextContentproperty of element objects?

Answer 22

Property that contains the text content of the element

Represents the text content of the node and its descendants

Question 23

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

Answer 23

element.textContent = newTextContent

Question 24

Is theeventparameter of an event listener callback always useful?

Answer 24

No

Question 25

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

Answer 25

Complicated

You would have to access the text content in .click-count then split string to access the numeric data

Question 26

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

Answer 26

Better to use data in the same language you are working in

Ease of access for repeated use

Question 27

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

Answer 27

No. When the element node is created, it is not yet part of the DOM tree

Question 28

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

Answer 28

parentEl.appendChild(childEl);

Question 29

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

Answer 29

Name - a string specifying the name of the attribute whose value is to be set
Value - a string containing the value to assign to the attribute

Question 30

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

Answer 30

Create new element and store it in a variable | .createElement()
Create a text node and store it in a variable | .createTextNode()
Attach the new text node to the new element | .appendChild()
Find the position where the new element should be added and store it in a variable | .querySelector()
Insert the new element into its position | .appendChild()

Question 31

What is thetextContentproperty of an element object for?

Answer 31

To get and set the text content for the element

Question 32

Name two ways to set theclassattribute of a DOM element.

Answer 32

Element.className

Element.setAttribute(name, value)

Question 33

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

Answer 33

Reusable: use functions more than once and use in different context

Question 34

What is theevent.target?

Answer 34

A reference to the object onto which the event was dispatched (originated) from

Question 35

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

Answer 35

Event bubbling

Question 36

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

Answer 36

event.tagName

Question 37

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

Answer 37

Selectors - a string of valid CSS selector to match the element and its ancestors against it
Returns - the closest ancestor element or itself, which matches the selectors, if there are no such element, null

Question 38

How can you remove an element from the DOM?

Answer 38

Element.remove()

No parameters, no return value (undefined)

Question 39

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 39

Add an event listener to the nearest parent