DOM Basics

Question 1

What is the DOM?

Answer 1

document object model - a representation/standardization

can access and change all elements of HTML document

Question 2

What does

document.querySelector()

return?

Answer 2

returns first element that matches selector

returns null if no matches

Question 3

How do you modify the text of elements on the DOM?

Answer 3

element.textContent = ‘insert text content here’

Question 4

What arguments does the addEventListener method take?

Answer 4

event to listen to
function to run when event occurs

Question 5

Give five examples of JavaScript events that can be listened for.

Answer 5

click
mousemove
dblclick
cut
copy 
paste

Question 6

What does document.createElement() take as its argument?

Answer 6

the element being created

Question 7

What does document.createElement() return?

Answer 7

DOM element

JS object representing a DOM element

Question 8

How do you append elements to the DOM?

Answer 8

newElement.appendChild(newContent);

Question 9

Why do we log things to the console?

Answer 9

so we can see what is going on with our code. checkpoints

Question 10

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

Answer 10

so you can use it later

its faster because you don’t need to search the document for the items again

Question 11

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

Answer 11

console.dir

Question 12

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

Answer 12

takes any valid CSS selector and will return the element by name, class or ID

Question 13

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

Answer 13

can take any valid CSS selector

returns nodeList

Question 14

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

Answer 14

browser needs to parse / load to html – > DOM NEEDS TO LOAD

before js can access them

or else js will result in nulls

Question 15

Is NodeList an array?

Answer 15

NodeList is NOT AN ARRAY
if you expand, a lot of the array methods are missing from list

are numerically indexed, have length property
thus you can loop through nodeLists

Question 16

var name for DOM element

Answer 16

$heading

use a $

Question 17

what is a callback function?

Answer 17

function that we give to another function
(we do not call it, we pass it to another function)

Question 18

What is the purpose of events and event handling?

Answer 18

to handle user input, user actions, and browser actions

Question 19

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

Answer 19

no

Question 20

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

Answer 20

callback function

Question 21

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

Answer 21

??

Question 22

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

Answer 22

target property of the event
can check with console.log(event.target)

will store the element interacted with

Question 23

What is the difference between these two snippets of code?

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

Answer 23

second one will return undefined

Question 24

What is the className property of element objects?

Answer 24

sets value of class attribute of specified element

Question 25

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

Answer 25

1. queryselect the DOM element
   (var $hotButton = document.querySelector(‘.hot-button’)
2. use $variable.className = ‘hot-button tepid’;
   (no dot notation for .className method)or $variable.className = ‘hot-button’ + temperature;
   (assuming var = temperature was declared and assigned)

Question 26

What is the textContent property of element objects?

Answer 26

how you access the text of an element, regardless of css rules

Question 27

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

Answer 27

element.textContent = ‘textstring’

Question 28

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

Answer 28

??

Question 29

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

Answer 29

more complicated

Question 30

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

Answer 30

so you don’t have to look it up every time

Question 31

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

Answer 31

no

Question 32

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

Answer 32

parent.appendChild(child);

Question 33

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

Answer 33

pass arguments as strings

ex/
element.setAttribute(‘class’, ‘class-name’)

or

(‘attribute-name’, ‘attribute-value’)

Question 34

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

Answer 34

Create Element
Add attributes (if any)
Add textNode / textContent (if any)
Append child

Question 35

What is the textContent property of an element object for?

Answer 35

To access or update text content of html element

textContent will create a textNode

Question 36

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

Answer 36

setAttribute

className

classList add
classList remove
classList toggle

Question 37

What are two advantages of defining a function to do create something

(like the work of creating a DOM tree)?

Answer 37

functions are repeatable and can be changed as needed easily

functionality is separate and can be switched up or changed as needed

Question 38

What is the event.target?

Answer 38

element that dispatched the event

point of interaction

Question 39

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

Answer 39

event bubbling allows you to listen for events on parent and still detect events in its children (it bubbles up)

Question 40

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

Answer 40

element.tagName

Question 41

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

Answer 41

argument: css selector(s)
returns: the element matching the selectors in argument –> assign to a $variable

(will return itself or closest ancestor)

Question 42

How can you remove an element from the DOM?

Answer 42

element.remove( );

Question 43

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 43

put event listener on parent and use event delegation to listen to events on children

Question 44

What is the affect of setting an element to display: none?

Answer 44

it hides the element from view in the browser

it takes element out of normal flow

Question 45

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

Answer 45

argument: selectorString
return: boolean value

Question 46

How can you retrieve the value of an element’s attribute?

Answer 46

element.getAttribute(‘attributeName’)

Question 47

At what steps of the solution would it be helpful to log things to the console?

Answer 47

at each step

ex/
after event is fired
after each if statement
after each for loop

Question 48

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

Answer 48

document.createElement

Question 49

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

Answer 49

manually change all views to hidden

then get click event target to view