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.
2
Q
What is the purpose of the DOM?
A
The DOM provides the functionality needed to build modern interactive user experiences.
3
Q
What is document?
A
document is the top-most DOM node that represents the entire HTML document.
4
Q
Node.nodeName
A
Returns the name of the current node as a string.
5
Q
What does the .nodeName property for elements return?
A
Returns the name of the corresponding tag in uppercase. EX: ‘P’ for paragraph.
6
Q
Node.nodeType
A
Returns a number that returns a node type constant.
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.
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.
9
Q
An element node’s .nodeValue property returns….
A
null
9
Q
Node.nodeValue
A
Returns the value of a node.
10
Q
A text node’s .nodeValue property returns…
A
The textual content of the node.
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.
12
Q
Element nodes represent…
A
HTML tags.
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.
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
15
Q
Node.childNodes
A
Returns a collection of the calling node’s children.
16
Q
Node.firstChild
A
Returns the calling node’s first child OR null.
17
Q
Node.lastChild
A
Returns the calling node’s last child OR null.
18
Q
Node.parentNode
A
Returns the calling node’s parent node OR null if the topmost node.
19
Q
A live collection…
A
automatically updates to reflect changes in the DOM.
20
Q
Node.nextSibling
A
Returns the node’s next sibling OR null.
21
Q
Node.previousSibling
A
Returns the node’s previous sibling OR null.
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.
23
Q
Node.getAttribute()
A
Retrieves the value of the node instance’s attribute passed as an argument.
24
`Node.setAttribute()`
Sets the value of the node instance's attribute (1st arg) to the value of the 2nd argument.
25
`Node.hasAttribute()`
Determines if the node instance has the attribute passed as an argument and returns an appropriate boolean value.
26
Reminder: There is a warning about using `.setAttribute` to modify `value` in XUL.
https://launchschool.com/lessons/ba24c7d4/assignments/c4315283#:~:text=When%20using%20setAttribute%20please%20take%20note%20of%20this%20warning%20from%20MDN
27
The DOM exposes special attributes as properties of the Element. What are these properties?
`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.
28
`Element.classList` property references...
A special array-like `DOMTokenList` object that exposes useful properties and methods for working with an Element's class(es).
29
`Element.classList.add()`
Adds a class name to an element
30
`Element.classList.remove()`
Removes a class list from an element.
31
`Element.classList.toggle()`
Adds a class to an element if it doesn't exist and removes the class if it does.
32
`Element.classList.contains()`
Determines if the element has a class and returns an appropriate boolean.
33
`Element.classList.length`
Returns the number of classes to which the element belongs.
34
Element nodes have a style attribute accessible via `Element.style` that references...
A `CSSStyleDeclaration` Object:
`CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", ...}`
35
To remove a CSS property...
set the property to `null` via `Element.style`
36
`Node.getElementsByTagName(tagName)`
Returns an array-like collection of matching elements that are within the calling node.
37
`Node.getElementsByClassName(className)`
Returns an array-like collection of matching elements that are within the calling node.
38
The most common CSS selectors that we will use include:
Element type ('p', 'h1'...), class name ('.className'), and id ('#idValue')
39
`Node.querySelector(selectors)`
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
`Node.querySelectorAll(selectors)`
Returns an array-like collection of matching elements within the calling node.
41
`Element.children`
Returns a live collection of all child elements.
42
`Node.firstElementChild`
Returns the first child element OR null
43
`Node.lastElementChild`
Returns the last child element OR null
44
`Node.childElementCount`
Returns the number of children elements
45
`Element.nextElementSibling`
Returns the next element sibling OR null
46
`Element.previousElementSibling`
Returns the previous element sibling OR null
47
The best strategy for updating text with JavaScript is to...
WHY?
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
`document.createElement(tagName)`
Method creates the HTML element specified by `tagName`
49
`Node.appendChild(node)`
Adds a node to the end of the calling node's children.
** use `document.body.appendChild` if need to insert to body.
50
`document.createTextNode(text)`
Creates a new text node.
51
`Node.cloneNode(deepClone)`
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
`Node.insertBefore(node, targetNode)`
Insert `node` into `node.childNodes` BEFORE `targetNode`.
53
`Node.replaceChild(node, targetNode)`
Remove `targetNode` from `node.childNodes` and insert `node` in its place.
54
No Node may appear twice in the DOM. Thus....
you can move an existing node by inserting it where you want it.
55
`element.insertAdjacentElement(position, newElement)`
Inserts `newElement` at `position` relative to `element`.
56
`element.insertAdjacentText(position, text)`
Inserts a Text node that contains `text` at `position` relative to `element`.
57
Valid `position` string values for Element insertion methods:
"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
`node.remove()`
Removes `node` from DOM
59
`node.parentElement`
Returns the node's parent element OR null
60
`setTimeout()`
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
`setInterval`
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
`Event.type`
Returns the name of the event.
61
`Event.currentTarget`
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
`Event.target`
The object on which the event occurred
EX: the element clicked by the user.
63
During the capturing phase of an event, the event travels...
down to the target element.
64
During the bubbling phase of an event, the event travels from....
the target element through containing elements.
65
`.addEventListener()`
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
`event.stopPropogation()`
Stops the `event` object from continuing its path along the capturing and bubbling phases.
67
`event.preventDefault()`
Directs the browser to NOT perform any actions that it might otherwise perform in response to a user's actions.
68
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.
69
How do you implement event delegation?
Event delegation involves adding a single listener to any common ancestor of the elements you want to watch.
70
`Promise.all()`
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
`Promise.race()`
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
`Promise.allSettled()`
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
`Promise.any()`
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
`Node.prototype.contains`
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
What is the value of `this` within an event handler function?
`Event.currentTarget`
76
What are some benefits of event delegation?
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
What is asynchronous JavaScript?
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
What does the `DOMContentLoaded` event mean?
This event is fired when the browser has fully loaded the HTML, and the DOM tree is built, but external resources like pictures `![]()
` and stylesheets may not yet have loaded.
79
How do web API responses differ from typical responses sent to a user that is using a browser to make requests?
API responses are typically just data, represented in a way that makes it easy to put to use.
80
One thing all APIs have in common is...
providing functionality for use by another program.
81
What is AJAX?
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
What is `XMLHttpRequest` purpose? Is it synchronous or asynchronous?
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
Tip: Use CSS set display to none to 'hide' things rather than delete them from the DOM!
`display: none`
84
AJAX is a technique used to exchange data between a browser and a server without...
causing a full page reload.
85
The `load` event on a `XMLHttpRequest` object means...
the response has loaded.
86
The `loadstart` event on a `XMLHttpRequest` object means...
the request has been sent to the server.
87
The `loadend` event on a `XMLHttpRequest` object means...
the response loading is done and all other events have fired. This is the last event to fire.
88
The word “async” before a function means one simple thing...
The function always returns a Promise.
89
The `await` keyword before a promise makes JavaScript wait until that promise settles, and then...
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
An `HTMLCollection` is always a ____ collection
live
91
