General Web Flashcards
What is a semantic HTML tag and why might we want to use them?
A tag that describes what they are (header, footer, etc.). It makes reading code easier for ourselves and peers as well as being important for screen readers to make our site ADA accessible
Why do we need doctype at the beginning of an HTML document?
We want the browser to render HTML and XML in a standard format (HTML5).
Do document.onload and window.onload fire at the same time?
No, window.onload is fired when the entire page loads, including the contect, images, css, scripts, etc.
Document.onload is called when the DOM is ready, which can be prior to images and external content that needs to get loaded.
What does the tag do?
Creates a dropdown that you can hide/unhide, it lets you put copyright information or metadata about your site. Click to expand and it will be unexpanded by default.
Is there a difference between window and document?
Yes, the window is the first thing that gets loaded into the browser. It has the majority of object properties loaded onto it (length, inner-width, inner-height, name, if it’s been closed, etc.)
The document is one of the properties of the window object (HTML, PHP) and get’s loaded into the window object. Access document properties by using window.document.property or document.property
What are the different ways to get an element from DOM?
getElementById
getElementByClassName
getElementsByTagName (returns an HTML collection - no forEach)
querySelector
querySelectorAll (returns a node list - yes forEach)
How would we implement getElementsByAttribute?
Save document.all to a variable, cast it to an array, iterate using for loop, and use .hasAttribute method, look for attribute ‘href’ and push all those nodes with the attribute into a result array.
Ex.
let b = document.all;
let result = [];
for (let node of b) {
if (node.hasAttribute(‘href’)) {
result.push(node)
{
}
How do we add a class to an element using a query selector?
var list = document.querySelectorAll(“li”);
for (let i = 0; i < list.length; i++) {
list[i].classList.add(‘something’);
}How could I verify whether one element is a child of another?
function isDescendant(parent, child) {
let node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}What are DocumentFragment ‘s?
Node objects which are never part of the main DOM tree. The normal use case is to create one and append elements to the document fragment and then append the document fragment to the “DOM tree. The fragment is then replaced by all its children.
It’s in memory but not part of th main DOM tree so appending children to it does not cause the page tor reflow, could result in better performance.
What is repaint and when does this happend?
Repaint occurs when changes made to elements skin, changes it’s visibility, but not the layout. Includes outlining, visibility, background color
What is reflow? What causes reflow? How could you reduce reflow?
Reflow is critical in frontend performance, because it involves changes that affect the layout of a portion or whole webpage. A reflow of an element causes a subsequent reflow of all child/ancestor elements and elements following in the DOM. All other elements need to be repositioned to make room for the element we just moved around.
What is the difference between event.target and event.currentTarget?
Target is the element that triggered the event and currentTarget is the element that the eventlistener is attached to.
Often can be the same, but in situations where bubbling up currentTarget changes on the way up.
What is event bubbling?
When an event happens on an element, it’ll first run the handlers on it, then it’s going to run on it’s parent, then it’s going to run up the ancestor chain up to the window.
ex. 3 nested elements: form > div > p with a handler on each of them. Clicking on p, will run onClick on p, then outer div, then outer form, then so on till outer document.
This can also happen in the opposite direction: capturing
Rarely used, but if you want to use it, you’ll have to add a third argument set to the addEventListener method
elem.addEventListener(“click”, e=> alert(‘capturing ${elem.tagName}’), true);
The event listener will be fired on click
The callback will be executed
But then, the true argument will tell the eventlistener to capture instead of bubble
How could you capture all clicks in a page?
Put a clickhandler on the window
ex window.onClick
