DOM (Document Object Model) Flashcards

1
Q

What is a “model”?

A

A representation of an existing thing/concept

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 document being loaded

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

It is referring to the data type: object in JavaScript

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

What is a DOM Tree?

A

An element and all of its configurations + its relationship with its siblings/parents represented in the DOM

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

document.querySelector()
document.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

doucment.querySelectorAll()

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

To keep the location/reference point saved so one doesn’t have to search the DOM Tree for an element repeatedly

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

One has to allow the web page to fully load before trying to map it out with a DOM Tree

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

It takes a CSS selector as an argument and returns the first element found with that 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

Uses a CSS Selector and returns all elements found with that selector in a Node List.

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

Does assigning the return value of a DOM query actually assign that node to the variable?

A

No, it only saves the location of where that element is in the DOM Tree. (Tl;dr saves a reference point)

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

What is the DOM?

A

It is a recreation of the HTML Document stored as a JavaScript Object which is modeling the content of the HTML Document

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

What is the purpose of events and event handling?

A

To run a script whenever certain things happen within or to the browser.
It makes web pages more interactive for the user.

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

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

A

No, many functions/methods have optional parameters that do not need to be passed through as arguments for the function/method to execute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
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', functionName [, Boolean]) -Boolean optional

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

What is a callback function?

A

A function passed as an argument through another function

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

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

A

An event object that describes the event that occurred

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

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

A

A reference to the object in which an event was fired. One can check it by logging it. You could get more information at target documentation

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

What is the difference between these two snippets of code?

element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick())
A

handleClick is run when the event fires, while handleClick() is run while the page loads

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

What is the className property of element objects?

A

A property that has the value of the classes applied to the element object as a string

22
Q

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

A

Re-assign element.className

23
Q

What is the textContent property of element objects?

A

A property that has the value of the text content of the element object

24
Q

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

A

Re-assign element.textContent

25
Q

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

A

No, as sometimes we want code to run that doesn’t have any reference to the event that caused the code to run.

26
Q

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

A

It prevents one from having to re-query a document again in order to find/update a node.

27
Q

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

A

The ‘focus’ event is fired

28
Q

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

A

The ‘blur’ event is fired

29
Q

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

A

The ‘event.target.value’ event is fired

30
Q

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

A

The ‘submit’ event is fired

31
Q

What does the event.preventDefault() method do?

A

It prevents the default behavior of the event.

32
Q

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

A

in the case of forms it prevents data from being passed into the URL and the page refreshing

33
Q

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

A

The elements property

34
Q

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

A

The elements.whateverName.value property
Example syntax: $contactForm.elements.name.value

35
Q

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

A

No, it only creates it in the DOM.

36
Q

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

A

appendChild(childname)

37
Q

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

A

element.setAttribute('attributeName', 'attributeValue')

38
Q

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

A

One would need to create the element in the dom and add whatever necessary text content then append that element as a child to a queried element on the page.

39
Q

What is the textContent property of an element object for?

A

It is used to get or set the textContent found within an element

40
Q

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

A

One can use element.setAttribute() or provide it as an optional argument when using createElement

41
Q

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

A

It can easily be scaled and reapplied elsewhere on the page.

42
Q

What is the event.target?

A

It is the element which the event originated from.

43
Q

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

A

Event bubbling, which is default to event listeners unless one adds an optional boolean as an argument.

44
Q

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

A

event.target.tagName

45
Q

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

A

It takes a string as an argument with the syntax of a CSS selector and returns the closest ancestor.

46
Q

How can you remove an element from the DOM?

A

element.remove()

47
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

By taking advantage of the default behavior of event listeners: event bubbling. With event bubbling one can instead stick a listener on a parent element and target its children. (This is called event delegation)

48
Q

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

A

It takes a string following the format of a css selector and returns a boolean of true if the selector is found on that element and false if it is not.

49
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

By taking advantage of the default behavior of event listeners: event bubbling. With event bubbling, one can instead stick a listener on a parent element and target its children. (This is called event delegation)

50
Q

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

A

It takes a string following the syntax of a CSS selector and returns a boolean true if that selector is found on the element it is used on and false if it isn’t.

51
Q

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

A

element.getAttribute('example')

52
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

One would have to add an event listener for each tab + view.