Week 6 Flashcards
DOM stands for _________ _______ ______, it is a data structure that represents all parts of an ____ document
Document Object Model, HTML
The JavaScript object “document” represents the entire ___
DOM
T/F - DOM methods allow programmatic access to the tree
True
A node is an ______ that has properties. Each node in the DOM tree has:
A ____
A________ and their values
C_____ (if any)
object, A name, Attributes, Content
Types of DOM nodes (3)
Element Nodes, text nodes, attribute nodes
Properties of a basic node object:
(hint) 4 parent child related
Childnodes, firstChild, lastChild, parentNode
nodeName, nodeType, nodeValue, textContent
5 Selection methods
get______By__
get_______By_______
get_______ByC________
q___________(________)
q_____________(________)
getElementById(“id”)
getElementsByClassName(“name”)
getElementsByTagName(“name”)
querySelector(“selector”)
querySelectorAll(selector)
Explain this
getElementById(“id”)
returns the DOM node whose id matches the methods parameter
getElementsByClassName(“name”)
returns an array containing all the DOM nodes whose class attribute matches the methods parameter
getElementsByTagName(“name”)
Returns an array of all the DOM nodes whose type is the same as the methods parameter
getElementsByTagName(“footer”)
QuerySelectorAll()
Returns an array containing ALL the DOM nodes that match the CSS selector in the methods parameter
QuerySelector()
Returns the first element found in the DOM that matches the CSS selector in the methods parameter
A manipulation method ______s the right element from the DOM and then it will ______ the right property of this element
Select, change
Manipulation methods - Create Node:
Insert and removal:
node._______(_____ __ ______) - Insert into node at the beginning
node.before(nodes or strings) - Insert right before node
node._____(nodes or strings) - Insert right after node
____._____(nodes or strings) - Add the new node to the existing DOM tree
____.______() - remove nodes
node.prepend(nodes or strings)
node.before(nodes or strings)
node.after(nodes or strings)
node.append(nodes or strings)
node.remove()
Commonly used node properties:
Her definitions:
innerHTML -
textContent -
style -
innerHTML - all of the content of an element (text and tags). It replaces content but retains attributes
textContent - gets the content of all elements
style - They style attribute of the element
Better context:
InnerHTML - Can be used to get/set the content of the element it is used on. Whatever is inside is replaced but attributes are retained.
Commonly used node properties:
Her definitions
className -
tagName -
classNAme - The current value of the element’s class
tagName - The tag name of the element
an _____ is an action, usually caused by a user, that the web browser responds to
event
Event driven programming is a programing style where
code runs only in response to events
Code that runs in response to an event is called an event _______ or event ________
event handler or event listener
When an event occurs an event ______ is created and passed to the event listener. The event listener/handler can access this event object by including it as an argument to the callback function.
By convention, what is the event object parameter often named?
object.
It’s often named e.
We can use JavaScript to attach functions to elements when an event occurs. To do we need to:
1. Identify
2. Indicate
3. Specify the
- Identify the source element to listen for an event
- Indicate the event to trigger a response
- Specify the response function(s) to call when the event is triggered
target.addEventListener(event, fucntion)
What is the target, what is the function?
The target is the HTML element you want to add the event handler to. The function is the functions to run when the event is detected.
T/F - Good practice is to use the addEventListener() rarely
False.
Good practice is to use the addEventListener() method whenever possible
Common DOM Events for each piece of hardware/software
Mouse Events
Keyboard Events
Form Events
Document/Window events
Click
Keypress
Submit/Focus
load
e.g window.onload = funciton() {
-whatever needs to happen when the page loads
}
3 types of errors in JS GO
Syntax, Runtime, Logic
Runtime error vs logic error GO
Runtime - When a valid piece of code tries to do something that it’s not allowed to
Logic - When there are bugs built into our code and we do not get our intended results (often runs but results are undesirable)
T/F - The try statement allows you to define a block of code to be tested for errors while it is being executed
True
Syntax: try {
}
T/F - The catch statement allows you to define a block of code to be executed, if an error occurs in the try block
True
Syntax: catch(err){
}
A throw statement allow you to create a custom error. What is the exception compatible with?
A string, number, boolean, or object
Syntax:
if (StartIndex<0){
throw “startIndex is less than 0.”
}
T/F - The finally statement executes code after the try and catch statements if they pass
False. The finally statement executes code after the try and catch statements regardless of the result
T/F - Regular expression - RegEx is a sequence of characters that forms a search pattern.
True. search() and replace() can be used with RegEX strings
T/F - RegEx is used for form validation, as with Regex you can specify valid patterns for field entires, such as email addresses or phone numbers
True
JavaScript RegEX:
What do these operators mean/do?
.
*
+
?
[ ]
. matches any character except \n
* means 0 or more occurences
+ means 1 or more occurences
? means 0 or 1 occurences
[ ] group characters into a character set, will match any single character from the set
Inside a character set, specify a range of chars with -
What do these do?
/[a-z]/ -
/[a-zA-Z0-9]/
/
[a-z]/ - matches any lowercase letter
/[a-zA-Z0-9]/ matches any lowercase letter or number
T/F - ^ inside of RegEx negates a character set
True
/[^abcd]/ would match any character BUT the ones listed
RegEX - What do | and () mean?
means OR
() are for grouping. matches enclosed characters in exact order anywhere in a string
