DOM

Question 1

What is a “model”?

Answer 1

a representation of the HTML Page that includes all html elements, attributes, and text

Question 2

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

Answer 2

the HTML Page

Question 3

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

Answer 3

html Elements, attributes, text.

Question 4

What is a DOM Tree?

Answer 4

It is a model of a webpage that shows all HTML elements, attributes, and text. It looks similar to a family tree.

Question 5

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

Answer 5

1) getElementById

2) use a CSS Selector

Question 6

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

Answer 6

1) getElementByClassName()
2) getElementsByTagName()
3) querySelector

Question 7

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

Answer 7

When you need to work with an element more than once. This is called. ‘caching’

Question 8

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

Answer 8

console.dir()

Question 9

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

Answer 9

it returns the first Element within the parameters or group of selectors.

document.querySelector(‘selectors’)

Question 10

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

Answer 10

It is load order, HTML needs to load first, then the javascript so we can access all the Elements and attributes.

Question 11

Why do we log things to the console?

Answer 11

for debugging and for values

Question 12

What is the purpose of events and event handling?

Answer 12

It makes the page interactive.
An event means, that something has happend on the page, it can be either triggered by mouse, keyboards, or the UI itself.

An event handling is the process that responds to the even. “Hey this event happened, what should we do about it?”

1) select which node the script is responding to
2) which event on the selected node will trigger the response
3) state the code you want to run when event occurs

Question 13

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

Answer 13

square brackets in document denotes OPTIONAL. can be provided, but doesnt need to be provided.

Question 14

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

Answer 14

element.addEventListener

Question 15

What is a callback function?

Answer 15

a function passed into another function as an argument.

Question 16

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

Answer 16

It is the event object, which contains all the information of that event.

Question 17

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

Answer 17

Is the element.target in which the event was dispatched at or originated from. You can find it on MBN

Question 18

What is the difference between these two snippets of code?

Answer 18

element.addEventListener( ‘click, handleClick);
this is just defining which function needs to be run. when an event happens.

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

the ‘function’ portion is going to need to be worked on first. and it will return the value to replace the [handleClick()]

Question 19

What is the className property of element objects?

Answer 19

this gets and sets the value of the class attribute of the selected element.

Question 20

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

Answer 20

document.querySelector(‘.class-name’).className = ‘New name’);

Question 21

What is the textContent property of element objects?

Answer 21

the text property of the Node interface represents the text content of the node and its descendants.

Question 22

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

Answer 22

document.querySelector(‘element-selected’).textContent = ‘New text content’;

Question 23

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

Answer 23

it does not always need an event listener

Question 24

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

Answer 24

This would be a little more complicated. because we would always have to change the text content for each time we clicked it. instead of having an incremental increase to a variable

Question 25

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

Answer 25

so we are able to quickly call it by the variable name. instead of typing multiple methods.

Question 26

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

Answer 26

It is not part of the page yet, it is only creating a new element in Javascript. It will not be added until the 3rd step: appendChild

Question 27

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

Answer 27

the appendChild( ) method

Question 28

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

Answer 28

the name of the attribute and the value that is assigned to the attribute

If you want to assign a ‘class=”contact-form” ‘ it would be:

‘nameOfElement’.setAttribute(“class”, “contact-form”);

Question 29

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

Answer 29

1) creating the element using document.createElement( )
2) creating the text within that element using document.createTextNode( );
3) finding the location where you want to put the element.
document. querySelector(‘ ‘).appendChild( )

Question 30

What are two advantages of defining a function to do create something like the work of creating a DOM Tree

Answer 30

It makes the page dynamic, it could be repeated.

Question 31

What is the event.target?

Answer 31

The target the event happened on. more specific element it interacted with

Question 32

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

Answer 32

because of event Bubbling. the event starts at the most specific node and follows outwards.

Question 33

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

Answer 33

the type property.

element.type

Question 34

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

Answer 34

it takes the selectors / a string with matching css selector

and it returns the element which is teh closest ancestor of the selected element. if non, it is nul

querySelector looks going inward. element.Closest searches outward from the specific element point. l

Question 35

How can you remove an element from the DOM?

Answer 35

use the remove property method.

Question 36

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 36

use an addEventListener on the containing element instead of every new element. ;