DOM and BOM

Question 1

What does BOM stand for?

Answer 1

Browser Object Model.

Question 2

What does DOM stand for?

Answer 2

Document Object Model.

Question 3

What does the BOM provide us?

Answer 3

It provides us with the window object and associated methods.

Question 4

Name a BOM method.

Answer 4

alert is an example of a BOM method.

Question 5

How can we access the BOM methods

Answer 5

We can call them either by window.methodName or just methodName (without the window precursor)

Question 6

How can we examine the DOM in a web-browser.

Answer 6

We can access it in the Elements tab of the developer tools

Question 7

How can we access the DOM using JavaScript?

Answer 7

We can access it by using document

Question 8

When should we use document.querySelector(‘selectorName’)

Answer 8

document.querySelector should be used when the selector is more complicated than other targeted selectors.

Question 9

What is the syntax for accessing a DOM element using querySelector?

Answer 9

document.querySelector(‘selectorName’)
selectors must be prepended with # or . if they are ids or classes (or [] for attributes)

Question 10

If there are multiple elements available to querySelector which will be retrieved?

Answer 10

Only the first encountered element matching the querySelector will be retrieved.

Question 11

Can we combine elementNames in querySelector?

Answer 11

Yes, we can combine them in a long string (including # or . as appropriate)

Question 12

How can we search inside an element for another element using querySelector?

Answer 12

We can create a variable for an initial querySelector for the outside element then use that as
variable.querySelector(‘innerElementName’)

Question 13

How can we select something from the DOM using an attribute selector?

Answer 13

document.querySelector(‘[data-type=attributeName]’);

Question 14

What must things must we remember when selecting an object from the DOM using querySelector?

Answer 14

1. selection criteria must be in single quotes
2. selection criteria must include the CSS indicator for class or id
3. selection will include only the first element found that matches

Question 15

What symbols need to be included when using querySelector to find an attribute?

Answer 15

Square brackets - []

Question 16

How do we access the classList property for an element in the DOM?

Answer 16

We would need to selected the element in the DOM and save it to a variable.

let paragraph = document.querySelector(‘p’)

paragraph.classList would then access the p classes

Question 17

Why would we need to access the classList of an element?

Answer 17

We access the classList of an element to change the CSS classes applied to it, thereby changing its style rendering

Question 18

How do we add a CSS class to an element in the DOM using JavaScript?

Answer 18

We save the element to a variable to access the classList property

then we variableName.classList.add(‘className’)

to add a className to an element

Question 19

Can you add multiple classes to an element using classList.add?

Answer 19

Yes, but it might not be considered a best practice

Question 20

When adding and removing classes to an element, do we need a CSS class indicator ( . ) passed in as an argument?

Answer 20

No, we simply need to pass in the class name in quotes as an argument

Question 21

How would we remove a class from an element in the DOM?

Answer 21

We would save the element to a variable using

variableName = document.querySelector(‘elementName’)

then variableName.classList.remove(‘className’)

Question 22

Can we add or remove more than one class using

classList.add or classList.remove?

Answer 22

Yes, by separating them with a comma and surrounding each one with quotation marks

Question 23

Can we check is an element has a certain class assigned to it?

Answer 23

Yes, we use classList.contains to get a Boolean value back

we can then use this in a conditional statement to change state

Question 24

Name two ways we could toggle the presence of a class on an element in the DOM

Answer 24

1. write a conditional statement based on classList.contains
2. use classList.toggle

Question 25

How can we toggle the presence of a value on and off an element in the DOM?

Answer 25

We can use classList.toggle _or_ we can write a conditional statement with classList.contains

Question 26

What are event listeners?

Answer 26

Event Listeners are methods that we call on a DOM element that monitors that element for events (click, keyup, mousein,etc)

Question 27

How do we use an event listener in JavaScript?

Answer 27

We append the addEventListener method to the element we want to monitor. We pass the event we are listening for and a function as arguments to the addEventListener method. elementName.addEventListener('eventName', function(){})

Question 28

What is another name for the function passed to an event listener as an argument.

Answer 28

This function is also known as the event handler.

Question 29

What does the event handler allow us to do?

Answer 29

The event handler is a function that allows us to run code when an event listener fires

Question 30

How can we test if an event listener works?

Answer 30

We can test an even listener by having the event handler console.log some message.

Question 31

How can we use an event listener to change the color or background color of a DOM element?

Answer 31

1. Create classes to make the change 2. Create variables to hold the elements we want to change with document.querySelector('elementName') 3. Create a variable to hold the element on which we will add an event listener 4. elementName.addEventListener('eventName', function(){}); 5. In the event handler, use the .classList.add to add the appropriate CSS classes to the appropriate element to change.

Question 32

Is the event handler a callback function?

Answer 32

Yes, the event handler is a callback function

Question 33

Does the event handle accept arguments?

Answer 33

The event handle only accepts one argument - the event object.

Question 34

What is the typical name for the event object passed to the event hander?

Answer 34

It is typical to name the event object either: e _or_ evt

Question 35

How is querySelectorAll used?

Answer 35

querySelectorAll is used to select all the elements in a DOM that match the criteria.

Question 36

What does querySelectorAll return to us?

Answer 36

querySelectorAll returns a NodeList - an array-like object.

Question 37

What two properties does a NodeList have?

Answer 37

NodeLists have lengths and numbers as 'keys'

Question 38

How do we influence nodes on a NodeList?

Answer 38

We can loop over the nodes on a NodeList with either for…of or forEach loops.

Question 39

What might be a problem when using forEach on a NodeList?

Answer 39

The forEach method may not work on older browsers.

Question 40

How can we turn a NodeList into an array?

Answer 40

We can use Array.from to create an array from a NodeList: let array = Array.from(NodeList)

Question 41

How can we access a certain position on a NodeList?

Answer 41

NodeLists are array like objects, so we can use index-like notation to access a position on a NodeList

Question 42

What are alternatives to querySelectorAll?

Answer 42

getElementsByTagName getElementsByClassName

Question 43

Why might be use the getElements selector instead of a querySelectorAll?

Answer 43

getElements can be faster getElements return a live list

Question 44

What is a 'live list' in regards to selecting DOM elements?

Answer 44

It is a list of DOM nodes that is updated if more elements/classes are added to the DOM.

Question 45

What is another name for a ‘live list’?

Answer 45

A ‘Live Collection’.

Question 46

How many types of Nodes are there?

Answer 46

There are 7 types of Nodes.

Question 47

What are the types of Nodes we will encounter in the DOM?

Answer 47

1. Element Node 2. Text Node 3. Processing Instruction Node 4. Comment Node 5. Document Node 6. Document Type Node 7. Document Fragment Node

Question 48

What are the two most commonly used methods on Nodes?

Answer 48

* Node.parentElement * Node.textContent

Question 49

What does the parentElement method do to a node?

Answer 49

It returns the parent element of a node. If the node has no parent or the parent is not a node - it returns null

Question 50

What does the textContent method do to a node?

Answer 50

The textContent method sets or returns the textual content of an element and all descendants

Question 51

What is the danger of using Node.textContent to set the textual content of a node?

Answer 51

Using textContent will removes all the node's children and replaces them with a single text node and the provided string.

Question 52

What is the difference between an Element and a Node?

Answer 52

An element is a type of Node. Elements are specified directly in the HTML with a tag. They can also have id's or classes

Question 53

When should you use ID to select elements in the DOM vs classes or attributes?

Answer 53

When you only need to select one element, use ID. When you select more than one element use either classes or attributes.

Question 54

What is a JavaScript hook in relation to DOM manipulation?

Answer 54

A hook is a way of indicating that JavaScript is needed for a component work by prepending a class with js.

Question 55

Aside from classList, how might we influence an element's CSS properties?

Answer 55

We can use: 1. element.style.propertyName = value 2. element.style.setProperty('property', ‘value’)

Question 56

How can we set a custom-property value using JavaScript?

Answer 56

We can use: element.style.setProperty('--property', ‘value’)

Question 57

What do we need to consider when trying to access CSS styles on elements with JavaScript?

Answer 57

We need to consider where the style rule is coming from: Inline or Computed

Question 58

What are the two ways we can access CSS style information about an element using JavaScript?

Answer 58

After saving the element as a variable we could use. 1. element.style.styleName 2. getComputedStyle(elementName)

Question 59

What will getComputedStyles(variable) return to us?

Answer 59

It will return an object will all computed styles.

Question 60

What are three requirements of custom attributes?

Answer 60

1. Start with the prefix data- 2. No capital letters 3. Contain only a-z, numbers, - , . , : , \_

Question 61

How are custom attributes useful

Answer 61

They allow us 1. to add extra information when building components 2. create extra functionality on elements

Question 62

How can we set attributes on elements using JavaScript?

Answer 62

element.setAttribute('attributeName', ‘value’)

Question 63

How do we retrieve an attribute from an element using JavaScript?

Answer 63

We use the getAttribute method: element.getAttribute('attributeName')

Question 64

What will the getAttribute method return?

Answer 64

It will return a string of the value, if present, or null or “ ” if not present.

Question 65

Give an example of an HTML tag built-in attribute.

Answer 65

Id, class, contenteditable are all examples of attributes in relation to HTML tags.

Question 66

How can we remove an attribute from an HTML tag?

Answer 66

We can use the .removeAttribute method on an HTML element.

Question 67

What is the syntax for the removeAttribute method?

Answer 67

element.removeAttribute('attribute name')

Question 68

What method can we use to get size and position information about an element?

Answer 68

We can use the getBoundingClientRect() method with our element.

Question 69

What values does the getBoundingClientRect() method return to us?

Answer 69

It returns: 1. Top 2. Left 3. Bottom 4. Right 5. Width 6. Height 7. X 8. Y

Question 70

Where are the values of Top, Bottom, Left, Right measured from in getBoundingClientRect()?

Answer 70

They are measured from the top of the document to the stated position on the element.

Question 71

What is meant by “Traversing the DOM”?

Answer 71

Traversing the DOM means moving from one element to another using various methods.

Question 72

How can we move downwards from an element in the DOM?

Answer 72

We can use: 1. querySelector or querySelectorAll 2. children 3. firstElementChild

Question 73

When we use the children property of an element, what is returned?

Answer 73

The children property returns an HTML Collection of all direct descendants.

Question 74

What might we need to do to iterate over an HTML Collection?

Answer 74

We might need to change it into an array with Array.from(CollectionName)

Question 75

What will the firstElementChild select?

Answer 75

It will select the first child of the element indicated: element.firstElementChild

Question 76

What are two ways to traverse the DOM upwards?

Answer 76

1. parentElement 2. closest

Question 77

How is the parentElement selector used for traversing the DOM upwards?

Answer 77

element.parentElement will select the parentElement and this can be saved to a variable.

Question 78

How is the closest selector used when traversing the DOM?

Answer 78

The closest selector will find and select the closest ancestor of the indicated element: element.closest(elementToFind)

Question 79

Can you use closest to find the closest element across or downwards in the DOM?

Answer 79

No, closest only searches upwards in the DOM tree.

Question 80

Name three ways to traverse the DOM sideways

Answer 80

1. nextElementSibling 2. previousElementSibling 3. combining parentElement, children, and index

Question 81

Why would you use parentElement, children, and index to traverse the DOM sideways?

Answer 81

This combination will allow you to select a specific sibling, as opposed to adjacent siblings.

Question 82

Why do we set target elements on items in the DOM?

Answer 82

This allows us to link two elements together by using a data-target value equal to another element's Id value.

Question 83

How do we link an event listener with another element using target elements

Answer 83

const target = tab.dataset.target const tabContent = tabby.querySelector('#' + target)

Question 84

What is the syntax for a dataset element when using it as a target element?

Answer 84

data-target="targetName" targetName should match the idName of the element we are targeting