DOM

Question 1

Why do we log things to the console?

Answer 1

To make sure the code is running correctly and see the data

Question 2

What is a “model”?

Answer 2

A small representation of something we’re going to build generally

Question 3

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

Answer 3

The entire HTML document

Question 4

What is a DOM Tree?

Answer 4

Its a collection of objects that makes up the document

Question 5

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

Answer 5

getElementById and querySelector()

Question 6

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

Answer 6

Document.querySelectorAll()

Question 7

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

Answer 7

In case you need to use the same elements more than once

Question 8

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

Answer 8

Console.dir

Question 9

Why would a

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

Answer 9

Because we need to load HTML first. or else it will run before the HTML, which we wont be able to query the DOM.

Question 10

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

Answer 10

selector. It will return the first element in the dom that matches it.

Question 11

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

Answer 11

Selector. Returns a node list or a collection of all the elements that match that selector.

Question 12

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

Answer 12

The document object. we can check it on console.dir()

Question 13

What is the purpose of events and event handling?

Answer 13

Have some type of response to when a user interacts with the web page

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()

Question 16

What is a callback function?

Answer 16

A callback function is a function passed into another function as an argument

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 its what the user interacted with. For example, the button ‘Click Me’
It targets the element that 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

second: handleClick is being called. and the return value of handleClick will be substituted for the argument. handleClick() is being called without argument, there is no event object, there is no access to that. and its being called right when the code starts running because of (), no matter what, its going to try to call the function every time. so its going to pass ‘undefined’ as the argument because we’re not returning anything inside handleClick

Question 20

What is the className property of element objects?

Answer 20

Its a property that stores the class names for that particular element and it can be updated

Question 21

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

Answer 21

className and the assignment operator

Question 22

What is the textContent property of element objects?

Answer 22

represents the text content of the main element and its descendants.

Question 23

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

Answer 23

.textContext and assignment operator

Question 24

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

Answer 24

No. Because sometimes we’re not making use of the event inside the function. But the event object its still there and its always available.

Question 25

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

Answer 25

Easier to access

Question 26

Difference between innerText and textContent

Answer 26

innerText= will only be able to pull text from elements that are currently visible
textContent does not care. It will still let you access those things.

Question 27

What does the transform property do?

Answer 27

It allows you to modify the way that an element displays on a page.

Question 28

Give four examples of CSS transform functions.

Answer 28

rotate, scale, skew, or translate

Question 29

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

Answer 29

No. It just creates an element.

Question 30

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

Answer 30

appendChild() method;

Question 31

Difference between append() and appendChild()

Answer 31

With append, we can append multiple children at once. So we can pass multiple arguments in and it will append all into the same level.

Question 32

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

Answer 32

name of attribute and value

Question 33

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

Answer 33

createElement, give a content(textContent), and append it to the DOM (appendChild/append)

Question 34

What is the textContent property of an element object for?

Answer 34

It allows to create a text node and assign a text into an element
If we reassign the text content of an element, it will destroy any children and any text that element has.

Question 35

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

Answer 35

setAttribute, className, and classList

Question 36

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

Answer 36

repeatability, and visually more pleasing

Question 37

Give two examples of media features that you can query in an @media rule.

Answer 37

background color, min-width, hover

Question 38

Which HTML meta tag is used in mobile-responsive web pages?

Answer 38

Viewport meta tag

Question 39

What is the event.target?

Answer 39

its not the element that has the event listener, its the element which dispatched the event, which was interacted with. even when its the child of a parent. ex: when we click on an element

Question 40

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

Answer 40

If there was an event listener that was put on the parent, it would be able to detect any events that happen on its children. Its because those events will bubble up. So if the ul has an event listener and we click on its children, the event listener will fire.

Question 41

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

Answer 41

event.target.tagName/.-> will always return an element tag
there’s also a similar property called nodeName-> ocasionally may give something other than an element. and thats because node can be text node, white space nodes, element…

Question 42

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

Answer 42

Argument: selector. Return value: The closest ancestor Element or itself, which matches the selectors. If it does have any ancestor, it will return null

Question 43

How can you remove an element from the DOM?

Answer 43

element.remove() method

Question 44

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 44

by using the bubbling, we can put an event listener on the parent, and then anything that happens to its children it will catch.

Question 45

What is event.current.target?

Answer 45

It will always refer to this specific element that has the event.listener