Javascript | DOM Flashcards
How are (js) scripts loaded?
Elements, including the element, are by default, parsed in the order they appear in the HTML file. When the HTML parser encounters a
element, it loads the script then executes its contents before parsing the rest of the HTML. The two main points to note here are that:
- The HTML parser does NOT process the next element in the HTML file until it loads and executes the
element, thus leading to a delay in load time and resulting in a poor user experience.
- Additionally, scripts are loaded sequentially, so if one script depends on another script, they should be placed in that very order inside the HTML file.
In HTML:
Explain what the ‘defer’ and ‘async’ attributes do and what is the way to use them.
DEFER
HTML4 introduced the defer and async attributes of the element to address the user wait-time in the website based on different scenarios.
The defer attribute specifies scripts should be executed after the HTML file is completely parsed. When the HTML parser encounters a
element with the defer attribute, it loads the script but defers the actual execution of the JavaScript until after it finishes parsing the rest of the elements in the HTML file.
Example:
<script> When is defer useful? ASYNC When a script contains functionality that requires interaction with the DOM, the defer attribute is the way to go. This way, it ensures that the entire HTML file has been parsed before the script is executed. The async attribute loads and executes the script asynchronously with the rest of the webpage. This means that, similar to the defer attribute, the HTML parser will continue parsing the rest of the HTML as the script is downloaded in the background. However, with the async flag, the script will not wait until the entire page is parsed: it will execute immediately after it has been downloaded. Here is an example of the async tag: When is it useful? Async is useful for scripts that are independent of other scripts in order to function accordingly. Thus, if it does not matter exactly at which point the script file is executed, asynchronous loading is the most suitable option as it optimizes web page load time. </script>
Where should one place the tag?
The old convention was to put scripts right before the
What are the following?
The DOM tree
A node
The root node
The DOM is a structural model of a web page that allows for scripting languages to access that page.
The DOM tree follows similar logic to that of a family tree. A family tree is made up of family members and their relationships to the family name. In computer science, we would call each family member a node.
We define a node as an intersecting point in a tree that contains data.
In the DOM tree, the top-most node is called the root node, and it represents the HTML document. The descendants of the root node are the HTML tags in the document, starting with the tag followed by the and tags and so on.
What is a parent node vs a child node?
A parent node is the closet connected node to another node in the direction towards the root.
A child node is the closest connected node to another node in the direction away from the root.
Approximately how many node objects are there in the DOM tree? Given examples
There are 9 (some say 12) different types of node objects in the DOM tree. 8 of the type Element and 1 of type Text, because they represent the text inside the HTML paragraph elements.
Root node (the document object) HTML node Head node Body node Title node h1 node (h2, h3,... are child nodes) Div node p node
What is the ‘document’ object?
The document object in JavaScript is the door to the DOM structure. The ‘document’ keyword grants access to the root of the DOM in JavaScript
The DOM:
Explain the .innerHTML and .style properties.
You can access and set the contents and style of an element with the .innerHTML and style properties respectively. E.g. by doing this:
document.body.innerHTML = ‘<h2>This is a heading</h2>’;
The DOM:
Explain the .querySelector() and .getElementById() methods.
The DOM Interface allows you to select a specific element with CSS SELECTORS (.e.g. id, class, element tag) by using the .querySelector(‘p’) method. NOTE: this method returns just the first element that matches that selector.
You can also access an element directly by its ID with .getElementById(‘id’)
The DOM:
Explain the .createElement(),.appendChild() and .removeChild() methods.
You can create, append, and remove elements by using the .createElement(),.appendChild() and .removeChild() methods respectively.
Example:
let paragraph = document.createElement('p');
paragraph. innerHTML = ‘The text inside paragraph’;
document. body.appendChild(paragraph);
The DOM:
Explain the .onclick property.
The .onclick property adds interactivity to a DOM element based on a click event.
Example:
let element = document.getElementById('interact');
element.onclick = function() { element.style.backgroundColor = ‘blue’ };
DOM events:
What is an ‘event’?
What are ‘event handlers’?
Events on the web are user interactions and browser manipulations that you can program to trigger functionality. Some examples of events are:
- A mouse clicking on a button
- Webpage files loading in the browser
- A user swiping right on an image
You can create interactivity on a website by assigning a function to respond to a specific event firing, or triggering.
NOTE: JavaScript interprets events as event object that store event information residing in properties and methods.
After a specific event fires on a specific element in the document object model (or DOM), an event handler function can be created to run as a response. Event handlers are crucial for creating interactive websites with JavaScript.
IMPORTANT sequential logic to remember and use: in this example…
let eventTarget = document.getElementById(‘targetElement’);
eventTarget.onclick = function() {
// this block of code will run
}
1) First, you accessed the DOM element, the “event target”, by using its ID: document.getElementById(‘targetElement’). NOTE: The event target is the DOM element that the event fires on.
2) Then you created the “event handler property” which consists of the event target followed by the event name (the prefix ‘on-‘ and the event type.) In this example, you’re using the ‘click’ event which fires when the user presses and releases a mouse button on a DOM element.
3) Lastly, you assigned an “event handler function” to the property.
NOTE1: it’s best practice to create NAMED event handler functions, instead of anonymous functions. Your code will remain organized and more readable & reusable this way. Example syntax:
let eventHandlerFunction = function() {
// this block of code will run
}
which then allows you to do this:
eventTarget.onclick = eventHandlerFunction;
NOTE2: JavaScript stores events as event objects with their related data and functionality as properties and methods. There are pre-determined properties associated with event objects.
DOM events:
Explain the .addEventListener() method.
The .addEventListener() method is another common syntax for registering event handlers. An event listener waits for a specific event to occur and calls a named event handler function to respond to it. This method requires two arguments:
- The event type as a string
- The event handler function
Here is an example syntax of an .addEventListener() method with a click event:
eventTarget.addEventListener(‘click’, eventHandlerFunction);
IMPORTANT:
You’ll want to use the .addEventListener() method to allow MULTIPLE event handlers to be registered to a single event without changing its other event handlers. Think of it as, on that event, I want “x, y, and z” to happen in one go. Worded differently, The .addEventListener() method is good for large code and it can be used to add multiple event handlers to a specific event.
DOM events:
Explain the .removeEventListener() method.
The .removeEventListener() method is used reverse the .addEventListener() method. This method stops the code from “listening” for an event to fire when it no longer needs to. .removeEventListener also passes two arguments:
- The event type as a string
- The event handler function
Check out the syntax of a .removeEventListener() method with a click event:
eventTarget.removeEventListener(‘click’, eventHandlerFunction);
DOM events:
Do all events require user interaction? Elaborate
Beyond the click event, there are all types of DOM events that can fire in a browser! It’s important to know most events in the DOM take place without being noticed because there are no event handlers connected to them.
It’s also important to know some registered events don’t depend on user interactions to fire. For instance, the ‘load’ event fires after website files completely load in the browser.
Browsers can fire many other events without a user — you can check out a list of events on the MDN Events Reference page.
