DOM

Question 1

Why do we log things to the console?

Answer 1

Debugging and anytime we want to know the value a variable holds

Question 2

What is a “model”?

Answer 2

Any representation of something

Question 3

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

Answer 3

XML or HTML document that is currently loaded (and all of its info)

Question 4

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

Answer 4

The web page loaded in the current window or tab

Question 5

What is the DOM tree?

Answer 5

A tree of all of the elements with the document node at its root.

Question 6

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

Answer 6

Document.querySelector() & Document.getElementById()

Question 7

Between Document.querySelector() & Document.getElementById() — which is faster? & why

Answer 7

getElementById b/c it doesn’t have to search

Question 8

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

Answer 8

Document.querySelectorAll (and Document.getElementsbyClass())

Question 9

What is the difference between querySelectorAll() and getElementsByClass() ?

Answer 9

QuerySelectorAll = nodelist ; getElementsbyClass = HTML collection

Question 10

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

Answer 10

So you can call and manipulate it later

Question 11

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

Answer 11

The .dir method

Question 12

Why would a tag need to be placed at the bottom of the HTML document?

Answer 12

You can’t query HTML that isn’t loaded yet

Question 13

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

Answer 13

It takes a string with a selector and returns the element that matches that string —> else null

Question 14

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

Answer 14

Takes a selector as a string as argument, returns a nodelist of all elements that match that selector.

Question 15

What is the purpose of events and event handling?

Answer 15

Create and manage interactivity with the webpage!

Question 16

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

Answer 16

Noooo — only the required ones (sometimes none)

Question 17

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

Answer 17

Document.addEventListener()

Question 18

What two traits define a callback function?

Answer 18

1. A function passed into another function
2. We don’t call it — it’s called by something else

Question 19

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

Answer 19

The event object

Question 20

What is the event.target? If you weren’t sure, how would you check?

Answer 20

It is the element that dispatches the event — we can console.log it — check MDN!

Question 21

Events have three phases… What are they?

Answer 21

1. Capture phase (travel and locate)
2. Fire on target (callback (passes in event object)
3. Bubbling (bubbles back up to the top of the document)

Question 22

What is the difference between these two snippets of code?
FunctionOne, FunctionOne()

Answer 22

One runs the function, one is referring to the function definition

Question 23

What is the className property of element objects?

Answer 23

Gets and sets the value of the class attribute

Question 24

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

Answer 24

Object.className = ‘class-to-set’;
Object.classList also has various useful methods

Question 25

What is the textContent property of element objects?

Answer 25

Gets and sets the text content of the node and all its descendants

Question 26

How do you update the text within an element?

Answer 26

Object.textContent = ‘text-to-set’;

Question 27

Is the event parameter of an event listener always useful?

Answer 27

It is not always used!

Question 28

Why is storing information in variables better than storing info in the DOM?

Answer 28

It’s easier to manipulate data into the DOM instead of the other way around — lots of things can affect the DOM

Question 29

What method is better for adding specific classes or toggling them on and off?

Answer 29

classList.method() —> add, remove, replace, and toggle methods

Question 30

Why is innerHTML baaaad?

Answer 30

You can see all of HTML —> if somebody is malicious and finds that in your document they can run scripts to pull information from your website. Eval is the same way!

Question 31

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

Answer 31

No — it only creates that element.

Question 32

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

Answer 32

Use either the .append( ) or .appendChild( ) method

Question 33

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

Answer 33

Two arguments, (attribute, value) —> i.e. (src, “image-path”)

Question 34

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

Answer 34

Create the element, add any desired properties, values, class, etc., use .appendChild( )

Question 35

What is the textContent property of an element object for?

Answer 35

Getter/setter for text content of an item —> it will create the node!

Question 36

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

Answer 36

className = ‘ ’ ; classList.add/remove/toggle( ) ; setAttribute(‘class’, ‘class-to-add”)

Question 37

What are two advantages of defining a function to create something like the DOM tree?

Answer 37

1. By adding input arguments, you can cut down on time if you have similar html structure
2. It allows easy manipulation of those elements because you already have them declared.
3. When you update the values, the function will also update the page.

Question 38

What is the event.target?

Answer 38

The element that dispatched the event (it was interacted with)

Question 39

Why is it possible to listen for events on one element that actually happens to its descendants?

Answer 39

Bubbling!

Question 40

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

Answer 40

Event.target.tagName (or event.target.nodeName)

Question 41

All elements are _____ but not all nodes are _____.

Answer 41

Nodes. Elements.

Question 42

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

Answer 42

It takes a selector as its argument and returns the closest element (or itself) that matches the selector —> else returns null

Question 43

How can you remove an element from the DOM?

Answer 43

Use the element.remove( ) method!

Question 44

If you wanted to insert new clickable DOM elements into the page using JS, how could you avoid adding an event listener to every new element individually?

Answer 44

Add the event listener to the shared ancestor of those elements and when the event bubbles, use the event.target.tagName to determine which element fired the event