DOM Querying, Events, and Manipulation

Question 1

What is the className property of element objects?

Answer 1

It grabs and sets the value of the class

It’s a property holding the class value of the element

Question 2

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

Answer 2

className = ‘new-value’

Question 3

What is the textContent property of element objects?

Answer 3

Whatever text is inside of the element and it’s children elements

Question 4

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

Answer 4

div1.textContent = ‘New value’

Question 5

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

Answer 5

Not always

Question 6

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

Answer 6

So we can reuse this information/data more easily

It makes the browser run more processes and do more work

Question 7

Why do we log things to the console?

Answer 7

To test and communicate with our code and see if it is working as intended

Debugging and double checking your value

Question 8

What is a “model”?

Answer 8

A representation/recreation of something

Question 9

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

Answer 9

It represents the entire web page. It is the starting point to the DOM Tree

Question 10

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

Answer 10

Objects are nodes within the DOM Tree

They represent every single element in the HTML document

Question 11

What is a DOM Tree?

Answer 11

A map of all elements and nodes that represents their relation to other elements

Relations: Parents, Childrens, Siblings, ancestors, and descendants

Question 12

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

Answer 12

getElementByID();

querySelector();

Question 13

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

Answer 13

getElementsByClassName();

getElementsByTagName();

querySelectorAll();

Question 14

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

Answer 14

When you need to work with the element more than once, you should use a variable to store the result of this query

var eleId = getElementByID(‘One’);

Question 15

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

Answer 15

console.dir();

Question 16

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

Answer 16

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

Question 17

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

Answer 17

It takes the first CSS Selector and returns the first matching element

Question 18

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

Answer 18

Uses a CSS Selector to select all matching elements/id/class

It returns the element

Question 19

Why do we log things to the console?

Answer 19

To test and communicate with our code to see if it’s working as intended

Debugging and double checking your value

Question 20

What is the purpose of events and event handling?

Answer 20

This enables the webpage to interact with it’s users

Question 21

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

Answer 21

It means that the arguments are optional

Question 22

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

Answer 22

element.addEventListener(‘eventName’, functionToRun);

Question 23

What is a callback function?

Answer 23

A function passed into another function as an argument

Question 24

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

Answer 24

The event object which contains all information about that event

Question 25

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

Answer 25

It is a reference to the object of which the event was dispatched

You google What is event.target mdn

Question 26

What is the difference between these two snippets of code?

Answer 26

element.addEventListener(‘click’, handleClick);

You’re calling the function with no extra arguments

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

You’re calling the function with extra arguments

Avoid this