DOM

Question 1

What is a “model”?

Answer 1

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

Question 2

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

Answer 2

Every element, attribute and piece of text is represented by its own dom node.

Question 3

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

Answer 3

Each element of the document (which is a node) is represents as an object with its properties

Question 4

What is a DOM Tree?

Answer 4

Relationships between the document and all of the element nodes and all of their child nodes and text nodes

Question 5

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

Answer 5

• getElementById()

- querySelector() - use this

Question 6

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

Answer 6

querySelectorAll()

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, you should use a variable to store the result of this query.

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 the elements in the HTML page before JavaScript code can access them.

Question 10

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

Answer 10

String value containing a css selector and returns the first element that contains it

Question 11

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

Answer 11

String value that is a css selector and returns a nodelist of all elements found with that selector

Question 12

What should we start variable names with if it deals with DOM content?

Answer 12

Use a dollar sign $

Question 13

What is the purpose of events and event handling?

Answer 13

Event are fired to notify code of outside changes that may affect code execution (event handling) like an action that occurs as a result of the user, like a mouse click (event)

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

Event Listener

Question 16

What is a callback function?

Answer 16

Function being passed around as a value; Not being invoked but passing around.

Question 17

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

Answer 17

An event object

Question 18

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

Answer 18

Element where the event occured

-MDN

Question 19

What is theclassNameproperty of element objects?

Answer 19

Sets or returns the class name of the element

Question 20

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

Answer 20

• query the dom for the element and assign a new value to the className property

Question 21

What is thetextContentproperty of element objects?

Answer 21

Sets or returns the text content of a specific node

Question 22

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

Answer 22

Use the .textContent property onto the node object.

Question 23

Is theeventparameter of an event listener callback always useful?

Answer 23

No, it can be ignored.

Question 24

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

Answer 24

Yes, so the DOM doesn’t have to look over each memory node.

Question 25

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

Answer 25

No, it attaches it to DOM Tree

Question 26

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

Answer 26

.appendChild()

Question 27

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

Answer 27

$element.setAttribute( “ attribute name “ , value )

Question 28

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

Answer 28

1) Create the Element w/ .createElement
2) Add textContent or className
3) Append it to something that is already queried

Question 29

What is thetextContentproperty of an element object for?

Answer 29

Setting or returning the text content of a node element

Question 30

Name two ways to set theclassattribute of a DOM element.

Answer 30

.setAttribute() method or .className on a node element (more preferred)

Question 31

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

Answer 31

Create copies easily. ex) Pokedex, we want a gallery on separate pages. By having the html skeleton structure, we can do so.

Question 32

What is theevent.target?

Answer 32

• A property returns which DOM element triggered the event.

- The element that is immediately interacted with

Question 33

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

Answer 33

Event is carried forward to every element above that element. Each element gets that exact event

Question 34

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

Answer 34

.tagName (meant for element)

.nodeName

Question 35

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

Answer 35

String of a css selector, and returns the most immediate one

Question 36

How can you remove an element from the DOM?

Answer 36

Using .remove() on the dom element

Question 37

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 37

Add it 1 layer higher, and wait for events to be fired.