Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Full Immersion > Document Object Model (DOM) > Flashcards

Document Object Model (DOM) Flashcards

1
Q

Why do we log things to the console?

A

To know what our code is doing at a given time

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

What is a “model”?

A

It’s a representation of something else or a guideline or a blueprint

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

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 model is made up of object data types (ie. windows object, document object, element objects)

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

What is a DOM Tree?

A

It is an element plus all of its elements.

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

.getElementById()

.querySelector()

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 saves the browser looking through the DOM tree to find the same elements again. It’s caching the selection. It is storing the location of the node.

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

It saves the browser looking through the DOM tree to find the same elements again. It’s caching the selection. It is storing the location of the node. It also allows you to edit it afterward.

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

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

A

In order to parse through all of the information on the webpage so it can access them

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

In order to parse through all the HTML information on the webpage so the DOM can access it.

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

takes on a selector and returns an 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

all selectors and returns ever static NodeList-(list of nodes)

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

What can DOM do?

A

change all the HTML elements in the page,
change all the HTML attributes in the page,
remove existing HTML elements and attributes,
add new HTML elements and attributes,
JavaScript can react to all existing HTML events in the page,
JavaScript can create new HTML events in the page.

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

getElementById()

A

Uses the value of an elements id attribute (which should be unique within the page).

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

querySelector()

A

Uses a CSS selector and returns the first matching element.

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

getElementsByClassName()

A

selects all elements that have a specific value for their class attribute.

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

getElementsByTagName()

A

Selects all elements that have the specified tag name.

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

querySelectorAll()

A

Uses a CSS selector to select all matching elements

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

parentNode

A

Selects the parent of the current element node

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

previousSibling/nextSibling

A

Selects the previous or next sibling from the DOM tree

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

firstChild/ lastChild

A

Select the first or last child of the current element.

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

$

A

Indicator that this holds a dom element

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

Why do we log things to the console?

A

to see what our code is doing

24
Q

What is the purpose of events and event handling?

A

An event is when something happens like a mouse click or a keypress and the purpose of it is to have a more interactive website

25
Q

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

A

addeventlistener

26
Q

What is a callback function?

A

This is a function that is passed in through another function as an argument.

27
Q

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

A

the event object target

28
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 where the even is coming from. I would check the MDN event reference page

29
Q

What is the difference between these two snippets of code?

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

A

First one means the first one will be called when fired. The last one is a call back function occurs when the page loads.

30
Q

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

A

They mean that the arguments are optional. You can leave them out.

31
Q

What is the className property of element objects?

A

Is the property on the element interface that gets and sets the value of the class attribute of the specified element

32
Q

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

A

element.NodeReference.className

33
Q

What is the textContent property of element objects?

A

represents the text content of the node and its descendants

gets the content of all elements including script and style elements

34
Q

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

A

node.textContent

35
Q

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

A

No it is not

36
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

It would be way more difficult

37
Q

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

A

So that it is easier to access

38
Q

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

A

no the append child does

39
Q

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

A

you use the appendChild()

40
Q

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

A

it is a name and a value and the value is automatically turned into a string

41
Q

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

A
  1. Create the element node
  2. Create the text node
  3. Add the text node to the element node
    4 . Add the element to the DOM tree
42
Q

What is the textContent property of an element object for?

A

update text content by setting or returning the text content of the node and all of its descendants.

43
Q

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

A

setAttribute className and classList

44
Q

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

A

Your job becomes automated for you.

easier to get information on to the page.

45
Q

What is the event.target?

A

The target property of the Event interface is a reference to the object onto which the event was dispatched.

46
Q

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

A

Bubbling occurs where it flows upwards to its ancestors

47
Q

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

A

tagName

48
Q

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

A

it takes on a selector and returns the closest node to that parent to that selector

49
Q

How can you remove an element from the DOM?

A

remove()

50
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 use event delegation on the highest node

51
Q

What is the event.target?

A

The target property of the Event interface is a reference to the object onto which the event was dispatched. Most direct

52
Q

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

A

it no longer is displayed is being removed from document flow.

53
Q

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

A

takes on selector returns a boolean

54
Q

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

A

getAttribute ()

55
Q

At what steps of the solution would it be helpful to log things to the console?

A

during every major step

56
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

eventlistener on every single tab

57
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

if statement for every single item.

Full Immersion (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions