DOM

Question 1

Why do we log things to the console?

Answer 1

To check functionality or accuracy of code

Question 2

What is a “model”?

Answer 2

A representation of something

Question 3

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

Answer 3

The HTML page or document object

Question 4

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

Answer 4

Each different part of the page

Question 5

What is a DOM Tree?

Answer 5

A DOM tree, which is made of the document node, element nodes, attribute nodes and text nodes; or all the HTML elements that make up the page

Question 6

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

Answer 6

getElementByID(), querySelector()

Question 7

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

Answer 7

getElementsByClassName(), getElementsByTagName(), querySelectorAll()

Question 8

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

Answer 8

If you need to work with an element more than once

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 script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

The HTML elements need to be processed before Javascript can access them

Question 11

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

Answer 11

Uses a CSS selector and returns the first matching element

Question 12

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

Answer 12

Uses a CSS selector to select all matching elements

Question 13

What is the purpose of events and event handling?

Answer 13

To listen and respond to user interactions

Question 14

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

Answer 14

No

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

.addEventListener()

Question 16

What is a callback function?

Answer 16

A function being passed through another function as an argument

Question 17

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

Answer 17

The event object

Question 18

What is the event.target?

Answer 18

A property of the event object that represents the HTML element that was interacted with and where the event is being dispatched.

Question 19

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

Answer 19

Having () after a function name will call it regardless of whether there is an event and that returned result is being used in the addEventListener method

Question 20

What is the className property of element objects?

Answer 20

A property of the Element interface that retrieves or sets the class of the specified element

Question 21

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

Answer 21

element.className =

Question 22

What is the textContent property of element objects?

Answer 22

A property of the Element interface that retrieves or sets the text of the specified element

Question 23

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

Answer 23

element.textContent =

Question 24

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

Answer 24

Yes, to prevent any confusion with other potential events on the page; however, it is not required

Question 25

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

Answer 25

More complicated

Question 26

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

Answer 26

Storing allows us to reference the information again rather than rerunning the code to search through the document each time. In addition, the DOM is dynamic, whereas variables are static

Question 27

What event is fired when a user places their cursor in a form control?

Answer 27

‘focus’

Question 28

What event is fired when a user’s cursor leaves a form control?

Answer 28

‘blur’

Question 29

What event is fired as a user changes the value of a form control?

Answer 29

‘input’

Question 30

What event is fired when a user clicks the “submit” button within a <form>?

Answer 30

‘submit’

Question 31

What does the event.preventDefault() method do?

Answer 31

Prevents default actions from happening unless the event is triggered

Question 32

What does submitting a form without event.preventDefault() do?

Answer 32

The form inputs are reset and the page refreshes

Question 33

What property of a form element object contains all of the form’s controls?

Answer 33

.elements

Question 34

What property of a form control object gets and sets its value?

Answer 34

.elements.name.value

Question 35

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

Answer 35

No, you would have to use .appendChild() or .insertBefore()

Question 36

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

Answer 36

parent.appendChild(element)

Question 37

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

Answer 37

element.setAttribute(‘name’, ‘value’)

Question 38

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

Answer 38

Create the element, assign content to the element, add/append it to the DOM

Question 39

What is the textContent property of an element object for?

Answer 39

To retrieve or set text within an element

Question 40

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

Answer 40

.setAttribute(‘name’, ‘value’); .className = ‘value’; .classList.add(‘value’); .classList = ‘value’

Question 41

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

Answer 41

Having a reusable tool to input new data in a standard format
- Reusable, standardization

Question 42

Give two examples of media features that you can query in an @media rule.

Answer 42

screen and print

Question 43

Which HTML meta tag is used in mobile-responsive web pages?

Answer 43

<meta name=”viewport”>

Question 44

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

Answer 44

There is event bubbling that allows event listeners to begin from the element where the event took place and then go upwards out to the parent

Question 45

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

Answer 45

.tagName()

Question 46

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

Answer 46

The argument will represent the criteria of what you are searching for (i.e. class name, element type, etc). It returns the closest ancestor that matches the argument criteria

Question 47

How can you remove an element from the DOM?

Answer 47

element.remove()
No parameters

Question 48

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 48

You can add an event listener to the parent and search for event targets with specified tag names

Question 49

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

Answer 49

Hides the element

Question 50

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

Answer 50

Takes in a selector and returns a boolean

Question 51

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

Answer 51

element.getAttribute()