Brainscape's Knowledge GenomeTM

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


See full index

LFZ > DOM > Flashcards

DOM Flashcards

1
Q

Why do we log things to the console?

A

To check and debug our code

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

What is a “model”?

A

data structure

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/ entire 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 objects that make up the Dom tree

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

What is a DOM Tree?

A

THE DOM TREE IS A

MODEL OF A WEB PAGE consisting of objects

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

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

A

getElementsByClassName()
getElementsByTagName()
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

Save it to a variable to save us time to access later

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

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 does document.querySelector() take as its argument and what does it return?

A

Takes a CSS selector as an argument and returns the first 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

Uses a CSS selector as argument and returns all matching elements.

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 check and debug our code.

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

Allows you or a user to interact and then respond to events that happen

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???

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

What is a callback function?

A

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

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

event object

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

point of interaction ie. mouseclick, target property. mdn

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

the second is excuting a function handleClick

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

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

A

No, only creates the element

22
Q

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

A

appendChild() method

23
Q

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

A

name and value

24
Q

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

A

create element node , query elector , appened child

25
Q

What is the textContent property of an element object for?

A

adding text content to an element and get text from element

26
Q

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

A

Element.setAttribute method, class name

27
Q

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

A
28
Q

What is the event.target?

A

The point of interaction by the user, target of the event

29
Q

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

A

Because of the event bubbling

30
Q

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

A

type property?

31
Q

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

A

A selector string and will return the Element which is the closest ancestor of the selected element.

32
Q

How can you remove an element from the DOM?

A

By using the Element.remove() method

33
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 targeting the parent element like in our task we targeted the .task-list

34
Q

What is the className property of element objects

A

it gets and sets the value of the class attribute of the specified element.

35
Q

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

A

by using the className property of the Element

36
Q

What is the textContent property of element objects?

A

it represents the text content of the node and its descendants.

37
Q

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

A

by using the textCo

ntent property of the Element

38
Q

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

A

Yes the parameters are required but not all of them are useful.

39
Q

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

A

Yes the parameters are required but not all of them are useful.

40
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
41
Q

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

A

Allows you to use that information again if needed.

42
Q

what is the event.target?

A

The target event property returns the element that triggered the event.

43
Q

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

A

Event delegation

44
Q

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

A
45
Q

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

A

a valid css selector or itself and returns the closest ancestor

46
Q

How can you remove an element from the DOM?

A

the remove method of the element object

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
48
Q

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

A

the affected element will disappear

49
Q

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

A

A string containing valid CSS selectors to test the Element against. Returns true if the element matches selector or false

50
Q

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

A

the getAttribute method

51
Q

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

A

after every step.

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

LFZ (4 decks)

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