Brainscape's Knowledge GenomeTM

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


See full index

Launch school > JS230 > Flashcards

JS230 Flashcards

Front-end development with JavaScript!

1
Q

What is the DOM?

A

The DOM is an in-memory object representation of an HTML document.

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

What is the purpose of the DOM?

A

The DOM provides the functionality needed to build modern interactive user experiences.

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

What is document?

A

document is the top-most DOM node that represents the entire HTML document.

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

Node.nodeName

A

Returns the name of the current node as a string.

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

What does the .nodeName property for elements return?

A

Returns the name of the corresponding tag in uppercase. EX: ‘P’ for paragraph.

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

Node.nodeType

A

Returns a number that returns a node type constant.

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

How would you determine if a node was an element node?

A

Use a comparison expression comparing node.nodeType to Node.ELEMENT_NODE.

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

How would you determine if a node was a text node?

A

Use a comparison expression comparing the node.nodeType to Node.TEXT_NODE.

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

An element node’s .nodeValue property returns….

A

null

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

Node.nodeValue

A

Returns the value of a node.

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

A text node’s .nodeValue property returns…

A

The textual content of the node.

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

What does the .textContent property return for element nodes?

A

The .textContent property returns a string of all the textual content of all the nodes inside the element.

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

Element nodes represent…

A

HTML tags.

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

The best way to determine a node’s type from the console is…?

A

node.toString() which will allow you to read the node’s name.

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

The best way to determine an Element node’s type (tag it represents from HTML) in a program is…?

A

Use the instanceof operator.
EX: node instance of HTMLParagraphElement

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

Node.childNodes

A

Returns a collection of the calling node’s children.

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

Node.firstChild

A

Returns the calling node’s first child OR null.

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

Node.lastChild

A

Returns the calling node’s last child OR null.

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

Node.parentNode

A

Returns the calling node’s parent node OR null if the topmost node.

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

A live collection…

A

automatically updates to reflect changes in the DOM.

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

Node.nextSibling

A

Returns the node’s next sibling OR null.

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

Node.previousSibling

A

Returns the node’s previous sibling OR null.

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

What are HTML attributes?

A

Elements in HTML have attributes. Attributes are values that configure the elements or adjust their behavior in various ways to meet the criteria that users want.

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

Node.getAttribute()

A

Retrieves the value of the node instance’s attribute passed as an argument.

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

Node.setAttribute()

A

Sets the value of the node instance’s attribute (1st arg) to the value of the 2nd argument.

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

Node.hasAttribute()

A

Determines if the node instance has the attribute passed as an argument and returns an appropriate boolean value.

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

Reminder: There is a warning about using .setAttribute to modify value in XUL.

A

https://launchschool.com/lessons/ba24c7d4/assignments/c4315283#:~:text=When%20using%20setAttribute%20please%20take%20note%20of%20this%20warning%20from%20MDN

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

The DOM exposes special attributes as properties of the Element. What are these properties?

A

id, name, title and value

Note: these properties can be accessed and reassigned using standard property access.

*these properties are only available on very select Elements.

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

Element.classList property references…

A

A special array-like DOMTokenList object that exposes useful properties and methods for working with an Element’s class(es).

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

Element.classList.add()

A

Adds a class name to an element

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

Element.classList.remove()

A

Removes a class list from an element.

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

Element.classList.toggle()

A

Adds a class to an element if it doesn’t exist and removes the class if it does.

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

Element.classList.contains()

A

Determines if the element has a class and returns an appropriate boolean.

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

Element.classList.length

A

Returns the number of classes to which the element belongs.

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

Element nodes have a style attribute accessible via Element.style that references…

A

A CSSStyleDeclaration Object:
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", ...}

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

To remove a CSS property…

A

set the property to null via Element.style

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

Node.getElementsByTagName(tagName)

A

Returns an array-like collection of matching elements that are within the calling node.

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

Node.getElementsByClassName(className)

A

Returns an array-like collection of matching elements that are within the calling node.

38
Q

The most common CSS selectors that we will use include:

A

Element type (‘p’, ‘h1’…), class name (‘.className’), and id (‘#idValue’)

39
Q

Node.querySelector(selectors)

A

Returns the first matching element within the calling node OR null

*Can take multiple selectors as an argument EX: ‘‘#divTwo, #divOne’ and returns the first matching element.

40
Q

Node.querySelectorAll(selectors)

A

Returns an array-like collection of matching elements within the calling node.

41
Q

Element.children

A

Returns a live collection of all child elements.

42
Q

Node.firstElementChild

A

Returns the first child element OR null

43
Q

Node.lastElementChild

A

Returns the last child element OR null

44
Q

Node.childElementCount

A

Returns the number of children elements

45
Q

Element.nextElementSibling

A

Returns the next element sibling OR null

46
Q

Element.previousElementSibling

A

Returns the previous element sibling OR null

47
Q

The best strategy for updating text with JavaScript is to…
WHY?

A

Place the text you need to update within an element. The element type doesn’t matter (could be a bare span or div). This is because when you reassign the Element.textContent doing so removes all child nodes from the element and replaces them with a text node.

48
Q

document.createElement(tagName)

A

Method creates the HTML element specified by tagName

49
Q

Node.appendChild(node)

A

Adds a node to the end of the calling node’s children.

** use document.body.appendChild if need to insert to body.

50
Q

document.createTextNode(text)

A

Creates a new text node.

51
Q

Node.cloneNode(deepClone)

A

If deepClone is true, cloneNode will create copies of the calling node and all descendent nodes! Otherwise will only copy calling node.

*Always provide an appropriate boolean argument value!

52
Q

Node.insertBefore(node, targetNode)

A

Insert node into node.childNodes BEFORE targetNode.

53
Q

Node.replaceChild(node, targetNode)

A

Remove targetNode from node.childNodes and insert node in its place.

54
Q

No Node may appear twice in the DOM. Thus….

A

you can move an existing node by inserting it where you want it.

55
Q

element.insertAdjacentElement(position, newElement)

A

Inserts newElement at position relative to element.

56
Q

element.insertAdjacentText(position, text)

A

Inserts a Text node that contains text at position relative to element.

57
Q

Valid position string values for Element insertion methods:

A

“beforebegin” -> Before the element
“afterbegin” -> Before the first child of the element
“beforeend” -> After the last child of the element
“afterend” -> After the element

58
Q

node.remove()

A

Removes node from DOM

59
Q

node.parentElement

A

Returns the node’s parent element OR null

60
Q

setTimeout()

A

Takes a callback and a number representing a timer in milliseconds, the callback is invoked only after the timer completes.

The timer starts once the primary JS file has finished execution. If no number provided default is 0, effectively executing the callback once the primary JS file has finished.

61
Q

setInterval

A

Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

61
Q

Event.type

A

Returns the name of the event.

61
Q

Event.currentTarget

A

Returns the current object that the event object is on. It always refers to the element that has the event listener attached to it.

62
Q

Event.target

A

The object on which the event occurred

EX: the element clicked by the user.

63
Q

During the capturing phase of an event, the event travels…

A

down to the target element.

64
Q

During the bubbling phase of an event, the event travels from….

A

the target element through containing elements.

65
Q

.addEventListener()

A

Sets up a function that will be called whenever the specified event is delivered to the target.

EventTarget.addEventListener(type, listener, useCapture)

*useCapture defaults to false unless specified otherwise.

66
Q

event.stopPropogation()

A

Stops the event object from continuing its path along the capturing and bubbling phases.

67
Q

event.preventDefault()

A

Directs the browser to NOT perform any actions that it might otherwise perform in response to a user’s actions.

68
Q

It’s good practice to call preventDefault or stopPropagation as soon as possible in an event handler. Doing so emphasizes the presence of those methods to people reading the code. It also ensures that these methods run before any errors occur; not running these methods before an error occurs can lead to unexpected behavior that is hard to debug.

A
69
Q

How do you implement event delegation?

A

Event delegation involves adding a single listener to any common ancestor of the elements you want to watch.

70
Q

Promise.all()

A

Takes an array of promises as an argument and returns a single promise. The returned promise resolves when all of the input promises resolve, or rejects as soon as one of the input promises rejects.

If the returned promise resolves, it resolves with an array containing the resolve values of each promise, in the same order as provided.

71
Q

Promise.race()

A

Takes an array of promises as an argument and returns a single promise that settles as soon as one of the input promises settles (is either resolved or rejected). This is useful when you only care about the first promise to complete.

72
Q

Promise.allSettled()

A

Takes an array of promises and returns a single promise that resolves after all of the input promises have either resolved or rejected. The returned promise settles with an array of objects that describes the outcome of each promise.

73
Q

Promise.any()

A

Promise.any() takes an array of Promise objects and, as soon as one of the promises in the array fulfills, it returns a single promise that resolves with the value from that promise. If no promises in the array fulfill (if all of the given promises are rejected), then the returned promise is rejected with an AggregateError, a new error type that groups together individual errors.

74
Q

Node.prototype.contains

A

Returns a boolean value indicating whether a node is a descendant of a given node, that is the node itself, one of its direct children (childNodes), one of the children’s direct children, and so on.

75
Q

What is the value of this within an event handler function?

A

Event.currentTarget

76
Q

What are some benefits of event delegation?

A

1) Makes code easier to maintainable by reducing the number of event listeners.

2) Allows developer to add event listener to an element that is not yet present in the DOM.

77
Q

What is asynchronous JavaScript?

A

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result.

78
Q

What does the DOMContentLoaded event mean?

A

This event is fired when the browser has fully loaded the HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may not yet have loaded.

79
Q

How do web API responses differ from typical responses sent to a user that is using a browser to make requests?

A

API responses are typically just data, represented in a way that makes it easy to put to use.

80
Q

One thing all APIs have in common is…

A

providing functionality for use by another program.

81
Q

What is AJAX?

A

AJAX stands for: Asynchronous JavaScript and XML (Ajax, or AJAX). It is a web development technique in which a web app fetches content from the server by making asynchronous HTTP requests, and uses the new content to update the relevant parts of the page without requiring a full page load.

82
Q

What is XMLHttpRequest purpose? Is it synchronous or asynchronous?

A

We use XMLHttpRequest (sometimes referred to as XHR) to make HTTP requests from JavaScript. The default behavior is for requests to be asynchronous, but this can be altered when configuring the object using the open() method.

83
Q

Tip: Use CSS set display to none to ‘hide’ things rather than delete them from the DOM!

A

display: none

84
Q

AJAX is a technique used to exchange data between a browser and a server without…

A

causing a full page reload.

85
Q

The load event on a XMLHttpRequest object means…

A

the response has loaded.

86
Q

The loadstart event on a XMLHttpRequest object means…

A

the request has been sent to the server.

87
Q

The loadend event on a XMLHttpRequest object means…

A

the response loading is done and all other events have fired. This is the last event to fire.

88
Q

The word “async” before a function means one simple thing…

A

The function always returns a Promise.

89
Q

The await keyword before a promise makes JavaScript wait until that promise settles, and then…

A

1) If it’s an error, an exception is generated — same as if throw error were called at that very place.

2) Otherwise, it returns the result.

90
Q

An HTMLCollection is always a ____ collection

A

live

91
Q
A

Launch school (8 decks)

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