DOM and BOM Flashcards
What does BOM stand for?
Browser Object Model.
What does DOM stand for?
Document Object Model.
What does the BOM provide us?
It provides us with the window object and associated methods.
Name a BOM method.
alert is an example of a BOM method.
How can we access the BOM methods
We can call them either by window.methodName or just methodName (without the window precursor)
How can we examine the DOM in a web-browser.
We can access it in the Elements tab of the developer tools
How can we access the DOM using JavaScript?
We can access it by using document
When should we use document.querySelector(‘selectorName’)
document.querySelector should be used when the selector is more complicated than other targeted selectors.
What is the syntax for accessing a DOM element using querySelector?
document.querySelector(‘selectorName’)
selectors must be prepended with # or . if they are ids or classes (or [] for attributes)
If there are multiple elements available to querySelector which will be retrieved?
Only the first encountered element matching the querySelector will be retrieved.
Can we combine elementNames in querySelector?
Yes, we can combine them in a long string (including # or . as appropriate)
How can we search inside an element for another element using querySelector?
We can create a variable for an initial querySelector for the outside element then use that as
variable.querySelector(‘innerElementName’)
How can we select something from the DOM using an attribute selector?
document.querySelector(‘[data-type=attributeName]’);
What must things must we remember when selecting an object from the DOM using querySelector?
- selection criteria must be in single quotes
- selection criteria must include the CSS indicator for class or id
- selection will include only the first element found that matches
What symbols need to be included when using querySelector to find an attribute?
Square brackets - []
How do we access the classList property for an element in the DOM?
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
Why would we need to access the classList of an element?
We access the classList of an element to change the CSS classes applied to it, thereby changing its style rendering
How do we add a CSS class to an element in the DOM using JavaScript?
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
Can you add multiple classes to an element using classList.add?
Yes, but it might not be considered a best practice
When adding and removing classes to an element, do we need a CSS class indicator ( . ) passed in as an argument?
No, we simply need to pass in the class name in quotes as an argument
How would we remove a class from an element in the DOM?
We would save the element to a variable using
variableName = document.querySelector(‘elementName’)
then variableName.classList.remove(‘className’)
Can we add or remove more than one class using
classList.add or classList.remove?
Yes, by separating them with a comma and surrounding each one with quotation marks
Can we check is an element has a certain class assigned to it?
Yes, we use classList.contains to get a Boolean value back
we can then use this in a conditional statement to change state
Name two ways we could toggle the presence of a class on an element in the DOM
- write a conditional statement based on classList.contains
- use classList.toggle
How can we toggle the presence of a value on and off an element in the DOM?
We can use classList.toggle
or
we can write a conditional statement with classList.contains
What are event listeners?
Event Listeners are methods that we call on a DOM element that monitors that element for events (click, keyup, mousein,etc)
How do we use an event listener in JavaScript?
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(){})
What is another name for the function passed to an event listener as an argument.
This function is also known as the event handler.
What does the event handler allow us to do?
The event handler is a function that allows us to run code when an event listener fires
How can we test if an event listener works?
We can test an even listener by having the event handler console.log some message.
How can we use an event listener to change the color or background color of a DOM element?
- Create classes to make the change
- Create variables to hold the elements we want to change with document.querySelector(‘elementName’)
- Create a variable to hold the element on which we will add an event listener
- elementName.addEventListener(‘eventName’, function(){});
- In the event handler, use the .classList.add to add the appropriate CSS classes to the appropriate element to change.
Is the event handler a callback function?
Yes, the event handler is a callback function
Does the event handle accept arguments?
The event handle only accepts one argument - the event object.
What is the typical name for the event object passed to the event hander?
It is typical to name the event object either:
e or evt
How is querySelectorAll used?
querySelectorAll is used to select all the elements in a DOM that match the criteria.
What does querySelectorAll return to us?
querySelectorAll returns a NodeList - an array-like object.
What two properties does a NodeList have?
NodeLists have lengths and numbers as ‘keys’
How do we influence nodes on a NodeList?
We can loop over the nodes on a NodeList with either for…of or forEach loops.
What might be a problem when using forEach on a NodeList?
The forEach method may not work on older browsers.
How can we turn a NodeList into an array?
We can use Array.from to create an array from a NodeList:
let array = Array.from(NodeList)
How can we access a certain position on a NodeList?
NodeLists are array like objects, so we can use index-like notation to access a position on a NodeList
What are alternatives to querySelectorAll?
getElementsByTagName
getElementsByClassName
Why might be use the getElements selector instead of a querySelectorAll?
getElements can be faster
getElements return a live list
What is a ‘live list’ in regards to selecting DOM elements?
It is a list of DOM nodes that is updated if more elements/classes are added to the DOM.
What is another name for a ‘live list’?
A ‘Live Collection’.
How many types of Nodes are there?
There are 7 types of Nodes.
What are the types of Nodes we will encounter in the DOM?
- Element Node
- Text Node
- Processing Instruction Node
- Comment Node
- Document Node
- Document Type Node
- Document Fragment Node
What are the two most commonly used methods on Nodes?
- Node.parentElement
- Node.textContent
What does the parentElement method do to a node?
It returns the parent element of a node.
If the node has no parent or the parent is not a node - it returns null
What does the textContent method do to a node?
The textContent method sets or returns the textual content of an element and all descendants
What is the danger of using Node.textContent to set the textual content of a node?
Using textContent will removes all the node’s children and replaces them with a single text node and the provided string.
What is the difference between an Element and a Node?
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
When should you use ID to select elements in the DOM vs classes or attributes?
When you only need to select one element, use ID. When you select more than one element use either classes or attributes.
What is a JavaScript hook in relation to DOM manipulation?
A hook is a way of indicating that JavaScript is needed for a component work by prepending a class with js.
Aside from classList, how might we influence an element’s CSS properties?
We can use:
- element.style.propertyName = value
- element.style.setProperty(‘property’, ‘value’)
How can we set a custom-property value using JavaScript?
We can use:
element.style.setProperty(‘–property’, ‘value’)
What do we need to consider when trying to access CSS styles on elements with JavaScript?
We need to consider where the style rule is coming from:
Inline or Computed
What are the two ways we can access CSS style information about an element using JavaScript?
After saving the element as a variable we could use.
- element.style.styleName
- getComputedStyle(elementName)
What will getComputedStyles(variable) return to us?
It will return an object will all computed styles.
What are three requirements of custom attributes?
- Start with the prefix data-
- No capital letters
- Contain only a-z, numbers, - , . , : , _
How are custom attributes useful
They allow us
- to add extra information when building components
- create extra functionality on elements
How can we set attributes on elements using JavaScript?
element.setAttribute(‘attributeName’, ‘value’)
How do we retrieve an attribute from an element using JavaScript?
We use the getAttribute method:
element.getAttribute(‘attributeName’)
What will the getAttribute method return?
It will return a string of the value, if present, or null or “ ” if not present.
Give an example of an HTML tag built-in attribute.
Id, class, contenteditable are all examples of attributes in relation to HTML tags.
How can we remove an attribute from an HTML tag?
We can use the .removeAttribute method on an HTML element.
What is the syntax for the removeAttribute method?
element.removeAttribute(‘attribute name’)
What method can we use to get size and position information about an element?
We can use the
getBoundingClientRect()
method with our element.
What values does the getBoundingClientRect() method return to us?
It returns:
- Top
- Left
- Bottom
- Right
- Width
- Height
- X
- Y
Where are the values of Top, Bottom, Left, Right measured from in getBoundingClientRect()?
They are measured from the top of the document to the stated position on the element.
What is meant by “Traversing the DOM”?
Traversing the DOM means moving from one element to another using various methods.
How can we move downwards from an element in the DOM?
We can use:
- querySelector or querySelectorAll
- children
- firstElementChild
When we use the children property of an element, what is returned?
The children property returns an HTML Collection of all direct descendants.
What might we need to do to iterate over an HTML Collection?
We might need to change it into an array with Array.from(CollectionName)
What will the firstElementChild select?
It will select the first child of the element indicated:
element.firstElementChild
What are two ways to traverse the DOM upwards?
- parentElement
- closest
How is the parentElement selector used for traversing the DOM upwards?
element.parentElement will select the parentElement and this can be saved to a variable.
How is the closest selector used when traversing the DOM?
The closest selector will find and select the closest ancestor of the indicated element:
element.closest(elementToFind)
Can you use closest to find the closest element across or downwards in the DOM?
No, closest only searches upwards in the DOM tree.
Name three ways to traverse the DOM sideways
- nextElementSibling
- previousElementSibling
- combining parentElement, children, and index
Why would you use parentElement, children, and index to traverse the DOM sideways?
This combination will allow you to select a specific sibling, as opposed to adjacent siblings.
Why do we set target elements on items in the DOM?
This allows us to link two elements together by using a data-target value equal to another element’s Id value.
How do we link an event listener with another element using target elements
const target = tab.dataset.target const tabContent = tabby.querySelector(‘#’ + target)
What is the syntax for a dataset element when using it as a target element?
data-target=”targetName”
targetName should match the idName of the element we are targeting
