THE DOM Flashcards

1
Q

Why do we log things to the console?

A

To see a variable’s contents, to see what an element contains when using dom query commands.

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

What is a “model”?

A

It is a representation of something else.

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 HTML document

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 model is made of objects, each object in the model represents a different part of the page in the browser window.

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

What is a DOM Tree?

A

A DOM element and all of its DOM child elements and contents.

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

document.querySelector(), document.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.getElementByClassName(), document.getElementByTagName(), 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 keep track of an element Node’s location in order to use it multiple times without retrieving it again.

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 script tag 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 before interacting with them

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

A css selector (tag name, class name, id name) it returns the location of the first of that matching 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

Css selector (tag name, class name, id name) and returns all of the elements that match in a node list

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

What is the purpose of events and event handling?

A

Do react and trigger events when something is done by the user

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

What do [] square brackets mean in function and method syntax documentation?

A

They are optional

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

.addEventListener

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

What is a callback function?

A

It is a function passed into another function as an argument

17
Q

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

A

An event object with all of the info of that event.

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

It is the target dom element that triggered the event. You can log the event and see the target element in the target property

19
Q

What is the difference between these two snippets of code?

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

A

With out parenthesis means that the function should be called when the event fires, with () means that that function should run as the page loads

20
Q

What is the className property of element objects?

A

It is a method that can be used to grab the class names of a dom element as a string, or be reassigned

21
Q

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

A

domelement.className = ‘className’. This rewrites the entire class attribute so if you are adding one class you need to re-add the other classes

22
Q

What is the textContent property of element objects?

A

It is a method that can be used to grab the text content of a dom element as a string, or be reassigned

23
Q

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

A

With .textContent

24
Q

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

A

no

25
Q

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

A

More complicated because we would have to retrieve it from the dom each time

26
Q

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

A

It is important because it is similar for the computer to access a variable with the value than pulling it from the dom each time.

27
Q

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

A

no

28
Q

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

A

Using the .appendChild method

29
Q

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

A

(‘attribute type’, ‘attribute value’)

30
Q

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

A

Create element node, create text node (if needed), set attributes (if needed), add text nodes and attributes, add to dom tree.

31
Q

What is the textContent property of an element object for?

A

To add text content to an element

32
Q

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

A

.setAttribute, .className, classList

33
Q

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

A

You can replicate the same dom tree section and give it different values.

34
Q

What is the event.target?

A

The target is the element that the event was triggered from

35
Q

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

A

Because event flow bubbling

36
Q

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

A

event.target.tagName

37
Q

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

A

It takes a selector in string form and returns the element that is closest to the selector

38
Q

How can you remove an element from the DOM?

A

element.remove()

39
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

You would add an event listener to the parent of the elements being added.