DOM Javascript

Question 1

What is the purpose of events and event handling?

Answer 1

events check for events that happen and event handling fires it

Question 2

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

Answer 2

optional arguments

Question 3

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

Answer 3

AddEventListener

Question 4

What is a callback function?

Answer 4

function that gets put into another function as argument and runs

Question 5

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

Answer 5

event object which has properties that tell us it’s current status or data

Question 6

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

Answer 6

event.target is the target element

Question 7

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

Answer 7

HTML document and elements

Question 8

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

Answer 8

querySelector and getElementByID

Question 9

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

Answer 9

querySelectorAll

Question 10

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

Answer 10

so that we can reuse it later

Question 11

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

Answer 11

console.dir

Question 12

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

Answer 12

css selector in string notation

Question 13

What is the className property of element objects?

Answer 13

it returns name of class

Question 14

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

Answer 14

use .className

Question 15

What is the textContent property of element objects?

Answer 15

it returns the content of text

Question 16

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

Answer 16

textContent, innerHTML and innerText

Question 17

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

Answer 17

not necessarily

Question 18

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

Answer 18

more complicated

Question 19

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

Answer 19

because we can use it when we want to

Question 20

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

Answer 20

No, not until it is appended to existing element on html document

Question 21

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

Answer 21

parentElement.appendChild()

Question 22

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

Answer 22

class then className

Question 23

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

Answer 23

Append created element to existing element on HTML page

Question 24

What is the textContent property of an element object for?

Answer 24

Used to get or alter the textContent of the element

Question 25

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

Answer 25

setAttribute or manually

Question 26

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

Answer 26

Efficiency and consistency

Question 27

What is the event.target?

Answer 27

element that is currently interacting with the event fired

Question 28

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

Answer 28

element will not be displayed and will be removed from the flow of the document

Question 29

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

Answer 29

css selector and returns boolean true if matched

Question 30

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

Answer 30

getAttribute method

Question 31

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

Answer 31

Every necessary step

Question 32

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?

Answer 32

It would look alot longer

Question 33

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?

Answer 33

It would look alot longer

Question 34

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

Answer 34

because of bubbling. The ancestor contains the descendants.

Question 35

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

Answer 35

tagName

Question 36

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

Answer 36

css selector and returns the closest matching element.

Question 37

How can you remove an element from the DOM?

Answer 37

element.remove()

Question 38

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 38

use event-delegation