## What I learned about JavaScript in recent weeks: An overview JavaScript DOM Events and Methods
### Introduction
JavaScript is said to be, technically, the first programming language we will be taught in our journey to becoming tech experts at Blockfuse Labs. The language is used for creating dynamic and interactive web pages, hence its ability to manipulate the Document Object Model (DOM) is central to this functionality. DOM events and methods allow developers to respond to user interactions and programmatically modify web page content. This report details some DOM events and methods learnt in class, providing clear explanations and concise examples to illustrate their usage. These tools are essential for building responsive, user-friendly web applications.
### What are DOM Events?
DOM events are signals triggered by user actions or browser states, enabling JavaScript to respond dynamically.
Below are key events taught with examples.
**DOMContentLoaded:** Fires when the HTML document is fully loaded and parsed, excluding images and stylesheets. Ideal for initializing scripts when the DOM is ready.
**Example:**
```
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM is ready!');
});
```
**load:** Triggers when a resource (e.g., window, image) and its dependencies are fully loaded. Used for post-load initialization.
**Example:**
```
window.addEventListener('load', () => {
console.log('Page fully loaded!');
});
```
**beforeunload:** Fires when a window or document is about to close or refresh. Useful for warnings or saving data.
**Example:**
```
window.addEventListener('beforeunload', (event) => {
event.returnValue = 'Are you sure you want to leave?';
});
```
**click:** Occurs when an element is clicked or tapped. Handles user interactions like button clicks.
**Example:**
```
document.querySelector('button').addEventListener('click', () => {
alert('Button clicked!');
});
```
**blur:** Triggers when an element loses focus (e.g., user clicks away). Often used for input validation.
**Example:**
```
document.querySelector('input').addEventListener('blur', (e) => {
console.log('Input lost focus: ' + e.target.value);
});
```
**focus:** Fires when an element gains focus (e.g., user clicks into an input). Prepares elements for input.
**Example:**
```
document.querySelector('input').addEventListener('focus', () => {
console.log('Input is focused!');
});
```
**keyup:** Occurs when a keyboard key is released. Useful for real-time input detection.
**Example:**
```
document.querySelector('input').addEventListener('keyup', (e) => {
console.log('Key released: ' + e.key);
});
```
**keydown:** Triggers when a keyboard key is pressed. Captures key presses like shortcuts.
**Example:**
```
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter') console.log('Enter pressed!');
});
```
**change:** Fires when an element’s value changes and loses focus. Handles form input updates.
**Example:**
```
document.querySelector('select').addEventListener('change', (e) => {
console.log('Selected: ' + e.target.value);
});
```
**hover:** Not a standard DOM event but refers to CSS :hover or JavaScript mouseenter/mouseleave. Triggers when the mouse enters/leaves an element.
**Example:**
```
document.querySelector('div').addEventListener('mouseenter', () => {
console.log('Mouse entered div!');
});
```
### What are DOM Methods?
DOM methods are JavaScript functions that manipulate the structure, content, and style of a web page.
Below are key methods demonstrated in class with examples.
**createElement:** Creates a new HTML element in memory, specified by tag name.
**Example:**
```
const div = document.createElement('div');
div.textContent = 'New div!';
```
**{parent/element}.appendChild:** Adds a child element to a parent, placing it at the end of the parent’s children.
**Example:**
```
const div = document.createElement('div');
div.textContent = 'Appended!';
document.body.appendChild(div);
```
**querySelector:** Finds the first element matching a CSS selector. Returns null if none found.
**Example:**
```
const button = document.querySelector('#myButton');
button.textContent = 'Click me!';
```
**querySelectorAll:** Finds all elements matching a CSS selector. Returns a NodeList.
**Example:**
```
const items = document.querySelectorAll('.item');
items.forEach(item => item.style.color = 'blue');
```
**getElementById:** Finds an element by its unique id. Returns null if none found.
**Example:**
```
const element = document.getElementById('header');
element.textContent = 'Updated Header';
```
**getElementsByClassName:** Finds all elements with a specific class. Returns a live HTMLCollection.
**Example:**
```
const boxes = document.getElementsByClassName('box');
boxes[0].style.background = 'red';
```
**getElementsByTagName:** Finds all elements with a specific tag name. Returns a live HTMLCollection.
**Example:**
```
const paragraphs = document.getElementsByTagName('p');
paragraphs[0].textContent = 'New text';
```
**getElementsByName:** Finds elements with a specific name attribute. Returns a live NodeList.
**Example:**
```
const inputs = document.getElementsByName('option');
inputs.forEach(input => console.log(input.value));
```
**{element}.setAttribute:** Sets or updates an element’s attribute with a name and value.
**Example:**
```
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
```
**{element}.getAttribute:** Gets an attribute’s value by name. Returns null if absent.
**Example:**
```
const link = document.querySelector('a');
console.log(link.getAttribute('href')); // Logs URL
```
**{element}.classList.add:** Adds one or more classes to an element’s class list.
**Example:**
```
const div = document.querySelector('div');
div.classList.add('highlight');
```
**{element}.classList.remove:** Removes one or more classes from an element.
**Example:**
```
const div = document.querySelector('div');
div.classList.remove('highlight');
```
**{element}.classList.toggle:** Adds a class if absent, removes it if present.
**Example:**
```
const div = document.querySelector('div');
div.classList.toggle('active');
```
**{element}.classList.replace:** Replaces an existing class with a new one.
**Example:**
```
const div = document.querySelector('div');
div.classList.replace('oldClass', 'newClass');
```
**{parent}.removeChild:** Removes a specified child element from its parent.
**Example:**
```
const parent = document.querySelector('#container');
const child = document.querySelector('#item');
parent.removeChild(child);
```
**{element}.remove:** Removes an element directly from the DOM.
**Example:**
```
const element = document.querySelector('#item');
element.remove();
```
**{element}.style.{cssProperty}:** Sets or gets a CSS style property (camelCase, e.g., backgroundColor).
**Example:**
```
const div = document.querySelector('div');
div.style.backgroundColor = 'blue';
```
**{child}.parentElement:** Returns an element’s parent or null if none exists.
**Example:**
```
const child = document.querySelector('#child');
console.log(child.parentElement); // Logs parent element
```
**{child}.nextElementSibling:** Returns the next sibling element or null if none exists.
**Example:**
```
const first = document.querySelector('#first');
console.log(first.nextElementSibling); // Logs next element
```
**Date():** A constructor for date objects. As a function, returns a string with the current date/time.
**Example:**
```
console.log(Date()); // Logs current date/time string
const now = new Date(); // Creates Date object
```
### Conclusion
Becoming conversant with DOM events and methods is essential for creating interactive and dynamic web applications. Events like click, keyup, and DOMContentLoaded enable developers to respond to user actions and page states, while methods like createElement, querySelector, and classList provide precise control over the DOM’s structure and appearance. By combining these tools, one is able to build engaging user experiences. The examples are to demonstrate their practical applications, empowering one to implement these commands effectively in real-world projects.
This report would not be complete without appreciating the Management and Engineering Team at Blockfuse Labs, particularly, Engineer Kefas Kingsley (KC) for his erudite contribution to my education so far at Blockfuse Labs. I pray for ways and means for you all to continue to find the strength, zeal and more wisdom to raise giants like you in the nearest future. Thank you.
Sign in with Wallet
Connect another wallet