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 be able to see how the page interacts with what we’ve written
Debugging and analysis

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 recreation that’s an essence (but not 1:1 ratio) stored in the computer’s memory of how the website is structured in relation to the document and elements on the page

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 javascript objects

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

What is a DOM Tree?

A

Document Object Model
Recreation of the javascript object modeling the HTML content loaded in the browser
DOM tree can be the whole page, but it can also be a smaller section, where there’s a parent, child, descendent relation, however large or small
It’s a tree because of the relationships between the document and all the elements nodes are described like a family tree: parents, children, siblings, ancestors and descendents.

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

querySelector(), getElementById()
**querySelector() is basically the one mostly used

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(), getElementsByClassName(), GetElementsByTagName()
**querySelectorAll() is also the one mostly used

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

Permanent reference to that one element saves the computer time to not query/look for it everytime

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

HTML loads top to bottom,
All the information needs to be loaded and in place before an action can happen via javascript

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

Any CSS selector, written as string
Returns the first element object that matches the CSS selector

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

Any CSS selector, written as string
Returns all element objects that matches the CSS selector in the form of a Node List
Node list is object created to hold a list of dom elements
No ability to listen to event listeners, just DATA
But you can adjust every element IN the node list with a for loop, using the length of the 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

This is to make the user interaction with the webpage more organic and dynamic
Event handling is for something to happen when the event occurs

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, often it’s optional, like the eventListener has a 3 argument that is optional with default useCapture:false, so you don’t need to write it

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’s a function passed into another function as an argument, which is invoked inside the outer function to complete some kind of routine or action
For example, event listeners will call the other function it’s trying to pass, but only javascript will call it when the event happens

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

The event object
Contents returned are the data of what happened, where, how, when, etc

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

This is the targeting property of the event that is happening.
It’s the element where the interaction of the event occurred, NOT where the listener was applied
For example, it’ll tell you the property of where the event is that you’re calling or trying to modify

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?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())

A

The first one will run a variable named handleClick which will run a function named handleClick upon the event ‘click’
The second one will call the handleClick() function immediately instead of after an event with undefined as an argument which will give back undefined and do nothing and thus render the ‘click’ function useless/bugged.

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

className can get or set the value of the property of 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

object.className = ‘new class’

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

It’s the text content of the node and its descendents
Text content that is present in the element

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

variable.textContent = ‘new text content’

24
Q

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

A

Most of the time, yes it’s useful
Once in a while, no it’s not needed

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 for sure

26
Q

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

A

Focus event

27
Q

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

A

Blur event

28
Q

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

A

Input event

29
Q

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

A

Submit event on a form element, reloads the webpage

30
Q

What does the event.preventDefault() method do?

A

Blocks the default action of the event
Ex. you can remove the checking of a checkbox

31
Q

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

A

Refreshes the webpage, then sends the data in the same page

32
Q

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

A

Elements
form.elements.message.value

33
Q

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

A

Value property
form.elements.message.value

34
Q

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

A

If you run into a bug, then you don’t know where the bug actually happened and trying to find it wastes more time

35
Q

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

A

Check progress and make sure everything is working before proceeding

36
Q

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

A

No, just creates it and only exists in javascript

37
Q

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

A

appendChild() method
parent.appendChild(‘child’);

38
Q

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

A

The name (i.e. class, name, src)
The value, (whatever you’re going to name the name)
Both become strings cuz of DOM

39
Q

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

A

Create element
Create text content if needed
Locate the parent via querySelector()
AppendChild() to parent

40
Q

What is the textContent property of an element object for?

A

Find what the textcontent it already has
Or assign a new textcontent

41
Q

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

A

setAttribute() method
class name property

42
Q

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

A

The function can be reused
Use the output elsewhere for multiple jobs

43
Q

What is the event.target?

A

Tells you where the event happened in which element

44
Q

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

A

Because the default bubbling event flows outwardly from child to parent and outward

45
Q

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

A

TagName
Comes out in all caps and in string form

46
Q

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

A

CSS class name in string form
Returns the closest ancestor element
** exact opposite of querySelector, looks outward instead of inward
** querySelector can be used on any DOM element and you can use it on the parent to search its children

47
Q

How can you remove an element from the DOM?

A

element.remove();

48
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

Target the parent (ancestorElement.closest();) holding all the DOM element children via event delegation

49
Q

What is the event.target?

A

This is the element where the event took place/originated from

50
Q

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

A

It makes the entire element disappear
Removes it from document flow

51
Q

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

A

CSS selector in string form
Returns a boolean value if it matches/exists
*for verification method, to see if it’s the same thing or not
** only returns null if you’re trying to use a non-DOM element

52
Q

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

A

Element.getAttribute();
Takes an attribute name in string form

53
Q

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

A

Every line of code

54
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

You’d need an individual eventListener PER tab

55
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

Lots of if statements/conditional block for every scenario/function

Web Development (9 decks)

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