DOMS

Question 1

What is a “model”?

Answer 1

a representation of an actual thing

Question 2

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

Answer 2

a model of the HTML document that gets loaded to the browser as a javascript object

Question 3

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

Answer 3

each html element node. Has its own methods and properites and can be identified with element name id/class

Question 4

What is a DOM Tree?

Answer 4

the tree comprised of nodes with html elements and its classes

Question 5

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

Answer 5

document. querySelector() –> use this one

document. getElementByID()

Question 6

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

Answer 6

document. ->

getElementsByClassName()
getElementsByTagName()
querySelectorAll() –> use this one

Question 7

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

Answer 7

to recall it later

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 script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 9

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

Question 10

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

Answer 10

querySelector() -> string class, id, element but only returns the first match -> only returns one
querySelectorAll() -> css selector -> returns all that match

Question 11

What is the purpose of events and event handling?

Answer 11

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.

Question 12

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

Answer 12

no

Question 13

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

Answer 13

.addEventListener

Question 14

What is a callback function?

Answer 14

function that is put as an argument

runFunction(function)

Question 15

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

Answer 15

an event listener

Question 16

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

Answer 16

the DOM object that is listening for the event listener that is specified

Question 17

What is the difference between these two snippets of code?

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

Answer 17

first one, the function occurs when the add event listener is initiated but second one the handle click is being called immediately bc of the parentheses.

Question 18

What is the className property of element objects?

Answer 18

changes class name property that is seen in html class= '' 
<p class="blue"> Text </p>
p.className = 'red';

<p> Text </p>

Question 19

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

Answer 19

change class name using .className

Question 20

What is the textContent property of element objects?

Answer 20

gets the text of the specified dom object

Question 21

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

Answer 21

$var.textContent = ‘change text’;

Question 22

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

Answer 22

yes, that is how you initialize the event handling

Question 23

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

Answer 23

no, just stores a queried object into a variable. it does not add until you append it

Question 24

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

Answer 24

parent.appendChild( child )

.append( ) allows multiple elemnts to pass all at once

Question 25

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

Answer 25

.setAttribute( ‘ attribute ‘, ‘ name of attribute ‘)

Question 26

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

Answer 26

create element - > .createElement( ‘ element ‘ )

parent.appendChild( ^^)

Question 27

What is the textContent property of an element object for?

Answer 27

gives or updates value of textcontent

Question 28

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

Answer 28

.setAttribute( )
.className( )
.classList( )

Question 29

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

Answer 29

you can reuse that function

cleans up code?

Question 30

What is the event.target?

Answer 30

the location of which element an event occured in the query that you specified

so if queried div with bunch of buttons your event type can be in those buttons or labels or whatever

Question 31

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

Answer 31

because it is within the query that eventlistener is listening into –> within the breadth of listen

Question 32

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

Answer 32

event.target.tagName

Question 33

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

Answer 33

a css selector and returns the closest applicable one going towards document root so inside to outside.

Question 34

How can you remove an element from the DOM?

Answer 34

queriedElement.remove( );

Question 35

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 35

just add eventListener to the parent element where you are putting that element and specify that you want the event.target to be that new element.