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.
