JS In the Browser Flashcards
binding to key browser load lifecycle events
RESEARCH
creating DOM nodes and injecting them into the DOM
RESEARCH
useing data- attributes
RESEARCH
What are browser tools you can use to debug?
- Inspector in your browser’s dev tools
- Sources Tab - Step through the code using breakpoints
- Network tab - requests
optimizing performance of DOM reads & writes
RESEARCH
using localStorage and sessionStorage
RESEARCH
Describe jQuery’s.ready feature
DOM.Ready has 3 states:
Loading - still loading
Interactive - loaded and parsed
Complete - all sub resources including images and stylesheets have been loaded
Event Bubbling
Event handlers ‘bubble’ up from the child to its ancestor element.
What is the DOM?
Document Object Model
- treats HTML, XML, XHTML as a tree structure, each node represents a DOM object with the Document as the root
- ‘map’ of a webpage
What is a Global Variable?
Part of a single global object - in the browser it is the Window object
How does JS interact with the DOM?
You can select elements and manipulate them through JS.
You can listen for events / user interactions and run a function based on them.
What is the difference between document.getElementById and document.getElementsByTagName?
document. getElementById requires an id as an argument and returns a single element.
document. getElementsByTagName requires an HTML tag and returns an array.
What are the 2 most flexible selectors to grab html elements from the DOM?
document.querySelector and document.querySelectorAll
document. querySelector grabs the first element it finds
document. querySelector grabs all the elements in the collection
What is the difference between innerHTML and textContent?
textContent returns the value inside an HTML tag
innerHTML returns the html element and its value inside of a string
How can you change an attribute inside of an element?
You can use dot notation to access that property and reassign its value.
How do you get and set an element’s class?
You can do that by accessing its className property.
What is the difference between a node and an element in the DOM?
A node belongs to the tree data structure in the DOM and an element is plain HTML.
Explain how I would add a node to the DOM
I would create an element and then use appendChild, pass an element into that in order to add this node to the DOM.
What are 3 steps to make your site interactive?
- Select elements in the DOM.
- Manipulate elements
- Listen for user actions
What is EventTarget?
EventTarget object can be the element, or the window object.
How does addEventListener work?
addEventListener takes a DOM event type, and a callback function, called an eventHandler
What is the event object?
It contains methods that can be applied as event handlers to an event listener.
How do you make sure the target method on the event object triggers for a specific element?
Write a condition in your addEventListener function and add the tagName method to the event.target and assign it the html element type.
if (event.target.tagName == ‘LI’)
How would you insert a node before the reference node as a child of the current node?
Use insertBefore
