DOM

Question 1

Why do we log things to the console?

Answer 1

To test we have the correct data and keep track of where we are, in regards to the script

Question 2

What is a “model”?

Answer 2

A representation of an original thing

Question 3

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

Answer 3

The HTML document

Question 4

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

Answer 4

The objects within the document

Question 5

What is a DOM Tree?

Answer 5

The representation of the HTML with all the children and their descendants within the elements.

Question 6

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

Answer 6

document. queryselector(“CSS selector”);

document. getElementByID(“ID name”);

Question 7

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

Answer 7

document.querySelectorAll(“CSS selector”);

Question 8

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

Answer 8

If we need the item repeatedly, we can store the value to help reduce the work it needs to do.

Querying an object takes a good amount of work for your computer

Question 9

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

Answer 9

console.dir(object);

Question 10

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

Answer 10

The elements need to have loaded into the page before they are manipulated by our script

Most scripts (HTML, CSS, JS) are read from top to bottom.

Question 11

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

Answer 11

It takes a CSS selector as its argument and returns the while item w/ its content

<h1>Title<h1>

It returns the first item matching that description, from top down</h1></h1>

Question 12

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

Answer 12

A CSS selector and it returns a list of all the nodes that meet the specification

It returns an list of all the nodes we asked, and all their additional details from .dir

Question 13

What is the purpose of events and event handling?

Answer 13

Events allow us to determine when something occurs, like a user interacting with our page or something in the HTML changing with DOM

Handling the events would mean we have a response to the event we are now listening for. In the form of a function, with whatever commands we need

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

.addEventListener

element.addEventListener(‘event’, functionName);

Question 15

What is a callback function?

Answer 15

When we use a function as an argument for another function

function getFullName (first, last) {
	var fullName = first + ' ' + last;
	return fullName;
}

function greet(getFullName('John', 'Doe')) {
	console.log('Welcome to the program ' + getFullName)
}

Question 16

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

Answer 16

An event object, which is being created by the browser, for you.

It is an object which contains all the information needed

Question 17

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

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

Answer 17

Event target is the object we are watching, usually in the form of an element

We can check by consoling the event and the event.target

The line without the () after the function would work. The other would not. () would run instantly, when the code is read, which is not what we want.

Question 18

What is the className property of element objects?

Answer 18

It allows you to replace the class of a stored element

element.className = ‘new-classes’;

Question 19

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

Answer 19

element.className = ‘new-classes’;

Question 20

What is the textContent property of element objects?

Answer 20

It allows you to replace all the content (including children) of a stored element, with your new text

Question 21

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

Answer 21

element.textContent = ‘This is the new text’;

Question 22

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

Answer 22

For the event listener, not always, but it will always be there globally

In some cases, no arguments need to be passed into the listener

Question 23

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

Answer 23

More difficult. Instead of using a counter, we would need to ask the DOM for the value of the elements, every time we were going to interact with them.

Question 24

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

Answer 24

It allows for the selected element to be called multiple times, without issues.

Question 25

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

Answer 25

No. It created an element but it is not added until we append it.

Question 26

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

Answer 26

parentVar.appendChild(childVar);

Question 27

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

Answer 27

(‘attributeType’, ‘valueOfAttribute’);

element.setAttribute(‘src’,’image/dog.jpeg’);

Question 28

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

Answer 28

Create and store a created element in the DOM

Get the parent element from the DOM

Append the child into the parent element

Question 29

What is the textContent property of an element object for?

Answer 29

It allows you to modify the text of a stored element you got from the DOM

$h1.textContent = ‘Yo mama!’

Question 30

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

Answer 30

element. className = ‘large-font’;

element. setAttribute(‘class’, ‘large-font’);

Question 31

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

Answer 31

Saving the item saves the computer work by only asking it to pull from the document one time, as opposed to each time we need to edit it

It facilitated how we can call the element, for later use

Question 32

What is the event.target?

Answer 32

The target is the entire thing that was specifically clicked.
If your whole li is listening for a click, and it has a span in it, you’ll get the following:
<span>Text Content</span>

Question 33

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

Answer 33

When the event occurs, we can see the list of items within the parent, to specifically know what part of the node was clicked.

Question 34

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

Answer 34

event.target.tagName will tell you the element/tag, in all capital letters

For the span example, it’ll return the string “SPAN”

Question 35

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

Answer 35

It takes the target you are currently selecting and selects the closest item you are searching for, FROM ANCESTORS

For example:
You clicked on the a tag in this string: «a>div</a>> Find Store «a>a</a>>text>
event.target: «a>a</a>>text
You want to store the whole thing containing the a tag:
var container = event.target.closest(‘div’);

Question 36

How can you remove an element from the DOM?

Answer 36

$h1.remove();

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 the event listener to the entire section, as opposed to the specific button

From there, you can use event.target to observe which items are being interacted with.