DOM Flashcards

1
Q

What is a “model”?

A

A representation of something that focuses on the relevant characteristics of said thing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

The html element being loaded by the browser

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

The JavaScript object that the browser creates to model the html element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a DOM Tree?

A

The hierarchy of element nodes in the document object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

.querySelector(), .getElementById()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

.querySelectorAll(‘selector’)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

It allows the script to reuse the node without having to query for it every time, saving on computation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

console.dir()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

Placing it at the top would mean all of the script is run before any of the body elements are loaded

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

argument: selector string
return: first element node with the matching selector

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

argument: selector string
return: a NodeList of all element nodes that match the selector

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the purpose of events and event handling?

A

They allow the web page to react to situational events that occur in real time

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

.addEventListener(‘event’, function)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a callback function?

A

A function passed as an argument into another function, which can then be used by the other function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

An event object containing the details (e.g. mouse location) of the event, that was created by the browser right when the event fires

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the event.target?

A

The most immediate element node that was interacted with when the event triggers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the difference between these two snippets of code?

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

A

The former uses a callback function while the latter calls the function handleClick immediately when the line is read

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is the className property of element objects?

A

It is the string value of the element’s class attribute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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

A

Set element.className to a new string value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the textContent property of element objects?

A

It is a string of the element’s text content

21
Q

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

A

Set element.textContent to a new string value

22
Q

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

A

No, sometimes the event is only meant to trigger other actions

23
Q

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

A

It allows the information to be modified by only modifying the variables

24
Q

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

A

focus

25
Q

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

A

blur

26
Q

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

A

input

27
Q

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

A

submit

28
Q

What does the event.preventDefault() method do?

A

It prevents the event from executing its default actions (e.g. the event submit will no longer reset the form)

29
Q

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

A

The form will get reset

30
Q

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

A

.elements

31
Q

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

A

.value

32
Q

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

A

No, it only returns a new node

33
Q

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

A

.appendChild(childNode)

34
Q

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

A

nameOfAttribute, valueOfAttribute

35
Q

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

A

Create the element, query the DOM for a parent element, append the new element to the parent element

36
Q

What is the textContent property of an element object for?

A

It allows you to get and set the element’s text content

37
Q

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

A

Modify the property .className or use the method .setAttribute(‘class’, ‘value’)

38
Q

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

A

It allows you to scale the task and makes the function reusable in other situations

39
Q

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

A

Through event bubbling, clicking on an element means simultaneously clicking on it’s ancestors

40
Q

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

A

.tagName

41
Q

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

A

It takes a CSS selector in string form as an argument and returns the nearest ancestor that satisfies the selector

42
Q

How can you remove an element from the DOM?

A

.remove()

43
Q

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?

A

Apply the listener to the parent element and set a condition in the handler function for whenever the target is the desired element

44
Q

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

A

The browser will render the page as if the element and all it’s descendent elements were not there

45
Q

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

A

It takes a CSS selector in string form as an argument and returns a boolean on whether or not the element satisfies the selector

46
Q

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

A

.getAttribute(‘attribute’)

47
Q

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?

A

You would need to query for that tab and add another event listener for a click on that tab

48
Q

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?

A

You would need to write a conditional for each tab with a line of code addressing each tab per conditional