Brainscape's Knowledge GenomeTM

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


See full index

Web Development > DOM > Flashcards

DOM Flashcards

1
Q

Why do we log things to the console?

A

To verify and check code, and to use for investigating.

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

What is a “model”?

A

Something that represents something.

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 data type object

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

What is a DOM Tree?

A

The way a browser makes a model and structures an html page.
An element plus all of it’s configuration information plus it’s children and their configuration information.

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() <– use this almost always.

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

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

To be able to reference it to use many times 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 too parse through all elements before javascript 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

Uses a CSS selector (‘string’) 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 to select all matching elements returns the NodeList.

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

User interaction to make a response to an interaction. Interactivity

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

A callback function is a function passed into another function as an argument.

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

data about what happened.

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

The event.target is the element on the html that the event originated from. Go to MDN for more information.

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?

A

element.addEventListener(‘click’, handleClick) <– passing a variable which will be called when the action happens.
element.addEventListener(‘click’, handleClick()) <– calling the function without the interaction. (It is wrong, do not use.)

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

value of the attribute class on the html element.

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

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

A

use the className property

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

What is the textContent property of element objects?

A

changes the text-content of the element it is attached to.

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

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

A

Using the textContent property
elementName.textContent = “new text content as a string”

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

It would be harder.

26
Q

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

A

By keeping data in variables, you aren’t making your code dependent on html to function.
So we can reference it and manipulate it for the DOM without calling it many times.

27
Q

What event is fired when a user places their cursor in a form control?

A

focus

28
Q

What event is fired when a user’s cursor leaves a form control?

A

blur

29
Q

What event is fired as a user changes the value of a form control?

A

input

30
Q

What event is fired when a user clicks the “submit” button within a <form>?

A

submit

31
Q

What does the event.preventDefault() method do?

A

prevents default actions of the form.

32
Q

What does submitting a form without event.preventDefault() do?

A

does the default actions of the form.

33
Q

What property of a form element object contains all of the form’s controls.

A

elements property

34
Q

What property of a form control object gets and sets its value?

A

value

35
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

You could be writing alot of bugs.

36
Q

What is an advantage of having your console open when writing a JavaScript program?

A

When you’re writing code you can see where an error pops up.

37
Q

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

A

No

38
Q

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

A

appendChild

39
Q

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

A

setAttribute(‘attribute’, ‘what you want it to be’)

40
Q

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

A

create new element store in variable, query a element in the DOM store in variable, append new element to the queried element.

41
Q

What is the textContent property of an element object for?

A

contains the text of the element. Can set or get the text content.

42
Q

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

A

setAttribute or className

43
Q

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

A

You can use that function whenever you want.

44
Q

What is the event.target?

A

here the event started.

45
Q

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

A

event bubbling

46
Q

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

A

element.target.tagName

47
Q

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

A

takes a css selector and returns it’s closest ancestor

48
Q

How can you remove an element from the DOM?

A

element.remove() <– call on element itself.

49
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

create a function to listen for it using the parent element and do an action based on that.

50
Q

What is the event.target?

A

Event interface is a reference to the object onto which the event was dispatched.

51
Q

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

A

It removes it from view. Removes it from the document flow

52
Q

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

A

takes a string that is a ccss selector
returns a boolean

53
Q

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

A

getAttribute method

54
Q

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

A

Every step

55
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

Create a new event listener for that specific tab and view.

56
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

Create a new addEventListener for each individual tab/text content to run when one tab is clicked.
Can add a conditional block for each view

Web Development (4 decks)

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