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 debug / check

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

What is a “model”?

A

As a browser loads a web page, it creates a model of that 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

it represents the entire HTML page (and also corresponds to
the document object)

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

data type object in Javascript

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

What is a DOM Tree?

A

every element/content/configuration on your page is represented in the DOM tree

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

get ElementByld () don’t use
querySelector ()
use

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() don’t use

getElementsByTagName() don’t use

querySelectorAll() use

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

if your script needs to use the same element(s) more than once

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

Uses CSS selector syntax that would select one or more elements .
This method returns only the first of the matching elements.

querySelector(‘li.hot’)

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 CSS selector syntax to select one or more elements and returns all (node list) of those that match.

querySelectorAll(‘li.hot’)

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

When you browse the web, your browser registers different
types of events. It’s the browser’s way of saying, “Hey, this
just happened.” Your script can then respond to these events.

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

checkUsername (} function. Note that the parentheses are omitted
where the function is called because they would indicate that
the function should run as the page loads (rather than when the
event fires)

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

passing function as a value typically to another function

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

object with a huge set of properties explaining what just occurred

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

element where the event occurred

check it in console.log or mdn

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

top: passes function correctly

bottom: calling function immediately and returning event value

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

The className property of the Element interface gets and sets the value of the class attribute of the specified 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

element/variable.className = ‘value’

variable = document.querySelector

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

The textContent property of the Node interface represents the text content of the node and its descendants.

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

element/variable.textContent = ‘value’

variable = document.querySelector

24
Q

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

A

no (90% needed, just not always)

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

complicated

26
Q

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

A

we can keep using it

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

prevent default behavior

32
Q

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

A

the browser will automatically reloading the page with the form’s values in the URL.

**event handler for submit even MUST HAVE event.preventDefault()

33
Q

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

A

elements

34
Q

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

A

value property

35
Q

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

A

avoid big scale investigations to see what’s wrong

36
Q

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

A

check each step

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

name, value

40
Q

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

A

-create element
-text content(optional)
-query for parent element
-append

41
Q

What is the textContent property of an element object for?

A

set/get the text value

42
Q

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

A

classList.add() + setAttribute() +
className

43
Q

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

A

can reuse/recycle function

44
Q

What is the event.target?

A

element interacted with

45
Q

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

A

bubbling

46
Q

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

A

tagName property (uppercase) - use for elements
nodeName - can target documents and other big shit

47
Q

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

A

contains css selector for argument
return closest upward ancestor/parent element

48
Q

How can you remove an element from the DOM?

A

element.remove()

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

add it to the parent (called event-delegation)

50
Q

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

A

hides the element

51
Q

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

A

element / boolean (whether it matches the selector selected)

52
Q

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

A

element.getAttribute()

53
Q

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

A

each step

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

must have an individual conditional / event handler for each view

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

have to write conditionals for each view

Web Development (18 decks)

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