DOM

Question 1

Why do we log things to the console?

Answer 1

to check that the code is doing what we think it should be doing / for debugging

Question 2

What is a “model”?

Answer 2

a functional, simplified representation of something.

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

to the javascript objects (an object-oriented language)

Question 5

What is a DOM Tree?

Answer 5

a central node serving as the trunk, with a number of children nodes branching out from it (it’s branches), which in turn have their own nodes branch out of them until you get to their terminal elements (their leaves). Basically a matrioshka doll of nested parent-child-sibling elements.

Question 6

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

Answer 6

document. getElementByClassName();
document. getElementById();
document. querySelector();

Question 7

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

Answer 7

document.querySelectorAll();

Question 8

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

Answer 8

so you can easily access the properties/values o the DOM object, manipulating, adding, transforming or deleting them.

Question 9

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

Answer 9

console.dir()

Question 10

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

Answer 10

so that the DOM objects to be constructed can query their value from already existing elements (otherwise, the value null would be stored in the DOM variables)

Question 11

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

Answer 11

it takes a CSS selector for the target HTML element, and it returns a JavaScript object representing said element, called a DOM object.

Question 12

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

Answer 12

it takes a CSS selector for all HTML elements that satisfy it, and returns a JavaScript array that represents a list of all those elements called a DOM list (or a DOM node list).

Question 13

Why do we log things to the console?

Answer 13

To check if the code is doing what we expect it to do/ check for bugs.

Question 14

What is the purpose of events and event handling?

Answer 14

events are objects that log information of the web-page triggered by an… event. Event handling is to pass an event as the argument for a function that’ll utilize the data stored in the event object to response to said occurance.

Question 15

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

Answer 15

No

Question 16

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

Answer 16

element.addEventListener();

Question 17

What is a callback function?

Answer 17

a function passed as the argument of another function

Question 18

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

Answer 18

The triggering event object

Question 19

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

Answer 19

the element targeted by the event;
using console.log(event.target);
using console.dir(event.target);

Question 20

What is the difference between these two snippets of code?

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

Answer 20

in the first one, we have the callback function handleClick being passed as an argument for the .addEventListener method;
while in the second one, the function handleClick() is being called, and the return value of that function is being passed as an argument for the .addEventListener method

Question 21

What is the className property of element objects?

Answer 21

the string value of the element’s css class attribute;

Question 22

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

Answer 22

assign the new class values as a string to $element.className

Question 23

What is the textContent property of element objects?

Answer 23

a string value representing the text content of an html element

Question 24

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

Answer 24

$element.textContent = ‘new text’;

Question 25

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

Answer 25

no

Question 26

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

Answer 26

more complicated, for sure. There may be a simpler solution with some property of the click event object, but this may be more vulnerable to outside actors (taking values not stored in the javascript of the page)

Question 27

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

Answer 27

the document is suseptible to being tampered with via the dev tools, making it more vulnerable than storing data into javascript variables

Question 28

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

Answer 28

no

Question 29

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

Answer 29

$parentElement.appendChild($childElement);

Question 30

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

Answer 30

a string with the name of the attribute to be set, and another string withe the value to be assign to the attribute;

Question 31

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

Answer 31

.creatElement() -> .appendChild()

Question 32

What is the textContent property of an element object for?

Answer 32

to get and/or set the text content of an html element

Question 33

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

Answer 33

.setAttribute(‘class’, ‘class-value’);

.className = ‘class-value’;

Question 34

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

Answer 34

so you can reuse the function to do that piece of work some other time/ multiple times

Question 35

What is the event.target?

Answer 35

the DOM object representing the HTML element where the event was triggered

Question 36

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

Answer 36

because the default event flow is bubbling upwards

Question 37

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

Answer 37

$element.tagName;

Question 38

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

Answer 38

it takes a string with the syntax of a CSS selector, and returns the first parent node to match the selector;

Question 39

How can you remove an element from the DOM?

Answer 39

$element.delete();

Question 40

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 40

add the event listener to the parent node for the new elements