DOM Flashcards

1
Q

Why do we log things to the console?

A

Show check if our code is doing what its supposed to be doing; debugging

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

What is a “model”?

A

A representation of HTML on a webpage

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 web page

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 different parts that the web page is made of

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 a web page made out of objects, with each object representing a different part of the web page

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

Give two examples ofdocumentmethods that retrieve a single element from the DOM.

A

querySelector method, getElementById method

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

Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.

A

getElementsByClassName method

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

You may need to work with the element more than once, so it makes it easily accessible

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

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

A

The browser needs to parse all of the elements in the HTML page before the Javascript code can access them

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

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

A

It takes a selector for an element as the argument, and returns the first element on the document with that specified selector

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

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

A

It takes a selector for an element and returns a Nodelist of all the elements on the page that match that selector

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 show that the code is doing what its supposed to be doing and to debug it

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

It gives a response to user input.

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

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 method

17
Q

What is a callback function?

A

A function that is passed into another function as an argument

18
Q

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

A

The event object

19
Q

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

A

It returns the element that triggered the event. You can log it to the console to find more information about it

20
Q

What is theclassNameproperty of element objects?

A

It lets you set a new value for the class attribute for an element

21
Q

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

A

Have a new class name assigned to the className property of your chosen element object

22
Q

What is thetextContentproperty of element objects?

A

It allows you to get all the text content of that element and update it also

23
Q

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

A

Have some string text assigned to the textContent property of you chosen element object

24
Q

Is theeventparameter of an event listener callback always useful?

25
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
Would have been a lot more steps
26
Why is storing information about a program in variables better than only storing it in the DOM?
You may need to work with the element more than once, so it makes it easily accessible
27
Does the document.createElement() method insert a new element into the page?
It creates a new HTML element but it needs to be appended to the page still
28
How do you add an element as a child to another element?
Use the appendChild Method and pass the element as the argument
29
What do you pass as the arguments to the element.setAttribute() method?
A string for the name of the attribute and a string for the value of the attribute
30
What steps do you need to take in order to insert a new element into the page?
Create a element and store it in a variable | Use the appendChild Method to attach it to the html
31
What is the textContent property of an element object for?
It gets the text content of the element and can also set the text content for an element
32
Name two ways to set the class attribute of a DOM element.
Use the setAttribute method Use the className property/method? Add method of classList
33
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can create a Dom tree for a list of things like an array It can help with debugging
34
What is the event.target?
The element that the event was triggered from
35
Why is it possible to listen for events on one element that actually happen its descendent elements?
Bc HTML elements nest inside other elements. The event flows from the lease specific node towards the most specific node. Also known as event bubbling.
36
What DOM element property tells you what type of element it is?
The tagName property
37
What does the element.closest() method take as its argument and what does it return?
It takes one of the ancestor elements css selectors as an argument and returns the element that matches that css selector including itself; Returns null if nothing is found
38
How can you remove an element from the DOM?
The remove method
39
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?
You can add the event listener to the parent element