DOM Flashcards

1
Q

Why do we log things to the console?

A

To double check the code is doing what is intended.

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

What is a “model”?

A

The model is called a DOM tree. The tree is stored in the browsers’ memory.

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

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

A

The document is the html file.

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

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

A

The object represents a different object for each part of the page.

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

What is a DOM Tree?

A

A model of the selected element.

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

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

A

querySelector and getElementById

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

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

A

document.querySelectorAll().

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

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

A

So you can have an access point instead of having to query it every time you need it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
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
10
Q

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

A

So the js file can parse the entire html content first.

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

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

A

querySelector takes css selectors and the argument and returns the content of that element.

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

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

A

querySelectorAll takes css selectors and returns a node list.

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

Why do we log things to the console?

A

To clearly see what our line of code is doing.

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

Events are used to trigger a particular function. Event handlers are steps triggered after the event occurs.

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

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

A

object.addEventListener.

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

What is a callback function?

A

A callback function is a function passed into another function as an argument. It invokes the function inside.

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

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

A

The type of event, and the function given.

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

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

A

If not sure, console log the event.target. MDN has more information. Event.target is a DOM interface implemented by objects that can receive events and may have listeners for them.

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

What is the difference between these two snippets of code?

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

A

The snippet with the callback function calls that line of code when its run instead of when the event occurs.

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

What is the className property of element objects?

A

The className property allows us to get the value of the class attribute, as well as setting the value of it.

21
Q

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

A

You would query the element first and then use the className property to update the attribute.

22
Q

What is the textContent property of element objects?

A

The textContent property collects the text in that element as well as allowing updates to the text.

23
Q

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

A

Query the element first and then use textContent to update the text.

24
Q

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

A

No, but the event parameter should always be used.

25
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
Harder.
26
Why is storing information about a program in variables better than only storing it in the DOM?
With the variable, we can reuse that query. Without the variable, we would have to query the DOM every time.
27
What event is fired when a user places their cursor in a form control?
focus event
28
What event is fired when a user's cursor leaves a form control?
blue event
29
What event is fired as a user changes the value of a form control?
input event
30
What event is fired when a user clicks the "submit" button within a form?
submit event
31
What does the event.preventDefault() method do?
It tells the current event that is referred to, to not do the default behavior.
32
What does submitting a form without event.preventDefault() do?
The page will refresh and lose the submitted form because it has no where to store it.
33
What property of a form element object contains all of the form's controls.
HTMLFormControlsCollection
34
What property of form a control object gets and sets its value?
HTMLFormElement
35
What is one risk of writing a lot of code without checking to see if it works so far?
Waste of time. Hard to debug the longer it is.
36
What is an advantage of having your console open when writing a JavaScript program?
To constantly check if the js code is functional.
37
Does the document.createElement() method insert a new element into the page?
yes
38
How do you add an element as a child to another element?
element.appendChild(childelement)
39
What do you pass as the arguments to the element.setAttribute() method?
An attribute name as the first argument and a value for that attribute as the second argument.
40
What steps do you need to take in order to insert a new element into the page?
Use document.createElement() to make the element. Then add this newly created element to the desired parent element using element.appendChild()
41
What is the textContent property of an element object for?
The textContent property gets text content of that element or to set the element's text content.
42
Name two ways to set the class attribute of a DOM element.
element.setAttribute()
43
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
To work with data that we don't know the exact size of. It allows the code to be reusable.
44
What is the event.target?
.
45
Why is it possible to listen for events on one element that actually happen its descendent elements?
.
46
What DOM element property tells you what type of element it is?
.
47
What does the element.closest() method take as its argument and what does it return?
.
48
How can you remove an element from the DOM?
.
49
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?
.