Week 6

Question 1

DOM stands for _________ _______ ______, it is a data structure that represents all parts of an ____ document

Answer 1

Document Object Model, HTML

Question 2

The JavaScript object “document” represents the entire ___

Answer 2

DOM

Question 3

T/F - DOM methods allow programmatic access to the tree

Answer 3

True

Question 4

A node is an ______ that has properties. Each node in the DOM tree has:
A ____
A________ and their values
C_____ (if any)

Answer 4

object, A name, Attributes, Content

Question 5

Types of DOM nodes (3)

Answer 5

Element Nodes, text nodes, attribute nodes

Question 6

Properties of a basic node object:
(hint) 4 parent child related

Answer 6

Childnodes, firstChild, lastChild, parentNode

nodeName, nodeType, nodeValue, textContent

Question 7

5 Selection methods

get______By__
get_______By_______
get_______ByC________
q___________(________)
q_____________(________)

Answer 7

getElementById(“id”)
getElementsByClassName(“name”)
getElementsByTagName(“name”)
querySelector(“selector”)
querySelectorAll(selector)

Question 8

Explain this

getElementById(“id”)

Answer 8

returns the DOM node whose id matches the methods parameter

Question 9

getElementsByClassName(“name”)

Answer 9

returns an array containing all the DOM nodes whose class attribute matches the methods parameter

Question 10

getElementsByTagName(“name”)

Answer 10

Returns an array of all the DOM nodes whose type is the same as the methods parameter

getElementsByTagName(“footer”)

Question 11

QuerySelectorAll()

Answer 11

Returns an array containing ALL the DOM nodes that match the CSS selector in the methods parameter

Question 12

QuerySelector()

Answer 12

Returns the first element found in the DOM that matches the CSS selector in the methods parameter

Question 13

A manipulation method ______s the right element from the DOM and then it will ______ the right property of this element

Answer 13

Select, change

Question 14

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

Answer 14

node.prepend(nodes or strings)
node.before(nodes or strings)
node.after(nodes or strings)
node.append(nodes or strings)
node.remove()

Question 15

Commonly used node properties:
Her definitions:

innerHTML -
textContent -
style -

Answer 15

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.

Question 16

Commonly used node properties:
Her definitions

className -
tagName -

Answer 16

classNAme - The current value of the element’s class
tagName - The tag name of the element

Question 17

an _____ is an action, usually caused by a user, that the web browser responds to

Answer 17

event

Question 18

Event driven programming is a programing style where

Answer 18

code runs only in response to events

Question 19

Code that runs in response to an event is called an event _______ or event ________

Answer 19

event handler or event listener

Question 20

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?

Answer 20

object.

It’s often named e.

Question 21

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

Answer 21

1. Identify the source element to listen for an event
2. Indicate the event to trigger a response
3. Specify the response function(s) to call when the event is triggered

Question 22

target.addEventListener(event, fucntion)

What is the target, what is the function?

Answer 22

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.

Question 23

T/F - Good practice is to use the addEventListener() rarely

Answer 23

False.

Good practice is to use the addEventListener() method whenever possible

Question 24

Common DOM Events for each piece of hardware/software
Mouse Events
Keyboard Events
Form Events
Document/Window events

Answer 24

Click
Keypress
Submit/Focus
load

e.g window.onload = funciton() {
-whatever needs to happen when the page loads
}

Question 25

3 types of errors in JS GO

Answer 25

Syntax, Runtime, Logic

Question 26

Runtime error vs logic error GO

Answer 26

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)

Question 27

T/F - The try statement allows you to define a block of code to be tested for errors while it is being executed

Answer 27

True Syntax: try { }

Question 28

T/F - The catch statement allows you to define a block of code to be executed, if an error occurs in the try block

Answer 28

True Syntax: catch(err){ }

Question 29

A throw statement allow you to create a custom error. What is the exception compatible with?

Answer 29

A string, number, boolean, or object Syntax: if (StartIndex<0){ throw "startIndex is less than 0." }

Question 30

T/F - The finally statement executes code after the try and catch statements if they pass

Answer 30

False. The finally statement executes code after the try and catch statements regardless of the result

Question 31

T/F - Regular expression - RegEx is a sequence of characters that forms a search pattern.

Answer 31

True. search() and replace() can be used with RegEX strings

Question 32

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

Answer 32

True

Question 33

JavaScript RegEX: What do these operators mean/do? . * + ? [ ]

Answer 33

. 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

Question 34

Inside a character set, specify a range of chars with - What do these do? /[a-z]/ - /[a-zA-Z0-9]/

Answer 34

/ [a-z]/ - matches any lowercase letter /[a-zA-Z0-9]/ matches any lowercase letter or number

Question 35

T/F - ^ inside of RegEx negates a character set

Answer 35

True /[^abcd]/ would match any character BUT the ones listed

Question 36

RegEX - What do | and () mean?

Answer 36

| means OR () are for grouping. matches enclosed characters in exact order anywhere in a string