DOM

Question 1

why do we log things to the console?

Answer 1

to examine if the browser is showing the right value

Question 2

what is a “model”?

Answer 2

representation of the objects (replica)

Question 3

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

Answer 3

web page that can be displayed in the browser window or as the html source.

Question 4

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

Answer 4

• data type object in javascript
• DOM is javascript object which is a model of the html document
• it is not your html document. it is a response for your html document

Question 5

what is a DOM Tree?

Answer 5

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects.

parent elements containing child elements with nodes.

Question 6

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

Answer 6

getElementById,

querySelector (only use this) - for consistency

Question 7

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

Answer 7

querySelectorAll

Question 8

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

Answer 8

store the info that you need and access to it again

Question 9

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

Answer 9

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

to load the html and css first, and then javascript to be loaded

Question 11

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

Answer 11

string of the css selector and returns the first one of the matching elements.

Question 12

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

Answer 12

css selector and returns a NodeList (collection of data that matches the element and can’t add items)

Question 13

what is the purpose of events and event handling? -> interactive web apps

Answer 13

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.

To react to an event, you attach an event handler to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires.

When such a block of code is defined to run in response to an event, we say we are registering an event handler

Question 14

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

Answer 14

no. can call a function without a parameter.

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

addEvenListener

Question 16

what is a callback function?

Answer 16

a callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 17

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

Answer 17

object with all data of whatever event occurred.

Question 18

what is the ‘event.target’?

Answer 18

points to the element that the event occurred.

Question 19

• What is the difference between these two snippets of code?
  1) element.addEventListener(‘click’, handleClick)
  2) element.addEventListener(‘click’, handleClick())

Answer 19

the second one doesn’t access the object?
- uncaught typeerror: cannot read properties of undefined (reading ‘target’)

the parentheses are omitted where the function is called because they would indicate that the function should run as the page loads (rather than when the event fires)

Question 20

what is the ‘className’ property of element objects?

Answer 20

the className property of the Element interface gets and sets the value of the class attribute of the specified element.

Question 21

how do you update the css class attribute of an element using Javascript?

Answer 21

get the method from the object and add the className property

Question 22

what is the textContent property of element objects?

Answer 22

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

Question 23

how do you update the text within an element using Javascript?

Answer 23

assigning to the textContent property.

Question 24

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

Answer 24

no. sometimes it’s not used inside of the function. but still put the ‘event’ parameter.
=> clear indicator that we’re using the eventHandler. never call that function itself.

Question 25

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

Answer 25

It was less complicated with the variables
=> track the elements
=> javascript data stored in javascript..
=> DOM elements stored in dom…

Question 26

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

Answer 26

it’s easier for javascript to work with (put variables in javascript)

Question 27

does the ‘document.createElement()’ method insert a new element into the page?

Answer 27

it creates an element as a javascript object and just exists in your computer memory. (its not visible on the page)

Question 28

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

Answer 28

use appendChild()

Question 29

what do you pass the arguments to the ‘element.setAttribute()’ method?

Answer 29

string representing the attribute(property name) and the value inside of the html tag

Question 30

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

Answer 30

create => setAttribute or createTextNode => => query the element from the DOM => and append it using appendChild to the created element

Question 31

what is the ‘textContent’ property of an element object for?

Answer 31

The textContent property sets or returns the text content of the specified node, and all its descendants.

Question 32

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

Answer 32

setAttribute() or className.

Question 33

what are two advantages of defining a function to do create something (like creating a DOM)

Answer 33

• easy to test the function

- reuse the function

Question 34

what is the ‘event.target’?

Answer 34

target property of the event which is referred when the event is fired.

Question 35

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

Answer 35

by using event delegation / event bubbling?

Question 36

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

Answer 36

target. tagName

Question 37

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

Answer 37

selector, This method travels up the DOM tree from the current element and returns the closest ancestor that matches the given parameter:

Question 38

How can you remove an element from the DOM?

Answer 38

remove method.

Question 39

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 39

wrap the parent node in a variable and remove the child of the parent?