HTML, Vanilla JS DOM rendering Flashcards
What is DOM?
The Document Object Model (DOM) connects web pages to scripts or programming languages. Usually that means JavaScript, but modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language. The DOM model represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document’s structure, style or content. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.
How do we make up our own key for data attributes?
use data - key
How do we listen for a key-up event?
window.addEventListener(‘keydown’, function(e) ….)
How would we go about selecting and audio file to play a drum hit on click (vanilla JS)?
const audio = document.querySelector(audio[data-key="e.keyCode}"]);
const key = document.querySelector(.key[data-key="e.keyCode}"]);
if(!audio) return;
…to get it playing repeatedly (rewind to start),
audio.currentTime = 0;
audio.play()
How to get elements to get a cool style animation?
Like in jQuery, we want to add a class.
key.classList.add(‘playing(or desired class’)
What happens if we have a setTimeout and another animation in CSS?
We fall out of sync. We could instead use a transition-end event
Benefits of HTML5
Accessibility (more descriptive tags, ie article), Video/Audio Support, Doctype, Cleaner Code, Smarter Storage, Better Interactions, Game Development, Legacy/Cross Browser Support, Mobile, Trending towards the future.
what is classList?
The Element.classList is a read-only property which returns a live DOMTokenList collection of the class attributes of the element. Using classList is a convenient alternative to accessing an element’s list of classes as a space-delimited string via element.className .
Describe how to execute a type ahead using only Vanilla JS.
1) Have a JSON file w objects hooked up.
2) Use a built-in method called fetch(). It will return a promise.
3) within the promise, we want to call the json method so that it returns another “blob” of data.
fetch(endpoint)
.then(blob => blob.json())
.then(data => console.log(data))
What is fetch( );
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
It returns a promise (something will eventually come back from the fetch - async stuff). It however, does not know what kind of data will be coming back.
How to push in individual items from an array into another array (without nesting)
Use spread operator. (cities.push(…arrayItems))
How to put a variable into a REGEX exp?
const regex = new RegExp(wordToMatch, ‘gi’) g means global. i means case insensitive.
How do we set up an onChange event in Vanilla JS
receiver. addEventListener(‘change’, displayMatchFunction)
receiver. addEventListener(‘keyup’, displayMatchFunction)
How do we return HTML syntax within a JS function without JSX?
querySelector over the class you want. receiver.innerHTML and set it to a variable that you want to map over. return a string with HTML syntax and join it.
Using only Vanilla DOM JS, how would we retrieve input data from a form and display the results on page?
1) Create a handlesubmit function.
2) preventDefault
3) set the value of the target class (using document.querySelector(“.classname”)).
4) set the targetclass back to “” after the value has been saved.
5) create an element tag
6) within the .textContent of the created tag, set it to the value of the submitted data.
7) finally, we want to find the actual id of the tag we want to append to. Use getElement by Id and append the submitted data.
