My React Journey: Day 5

Today, I ventured into the world of DOM Manipulation, a fundamental concept in web development. The Document Object Model (DOM) is the bridge between HTML and JavaScript, allowing us to dynamically interact with and modify web pages. Here's what I learned:

What is DOM Manipulation?
DOM Manipulation is the process of using JavaScript to interact with and change the structure, style, or content of a webpage.

Accessing Elements
To manipulate the DOM, we first need to select or access the elements. JavaScript provides several methods to achieve this:

getElementById: Selects an element by its ID.

const header = document.getElementById('main-header');
console.log(header); // Logs the element with ID 'main-header'

querySelector: Selects the first matching element using CSS selectors.

const firstButton = document.querySelector('.btn');
console.log(firstButton); // Logs the first element with class 'btn'

querySelectorAll: Selects all matching elements as a NodeList.

const allButtons = document.querySelectorAll('.btn');
console.log(allButtons); // Logs a list of all elements with class 'btn'

Other Methods:

• getElementsByClassName (selects elements by class name).
• getElementsByTagName (selects elements by tag name).

Manipulating Elements
1. Changing Content
Use the innerHTML or textContent property to change the content of an element.

const title = document.getElementById('title');
title.innerHTML = 'Welcome to My React Journey!';
title.textContent = 'Day 5 - DOM Manipulation';

2. Changing Styles
You can dynamically update styles using the style property.

const button = document.querySelector('.btn');
button.style.backgroundColor = 'blue';
button.style.color = 'white';

3. Adding/Removing Classes
Use the classList property to add, remove, or toggle classes.

button.classList.add('active');   // Adds 'active' class
button.classList.remove('btn');  // Removes 'btn' class
button.classList.toggle('hidden'); // Toggles 'hidden' class

4. Attributes
You can modify attributes like src, alt, href, etc.

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful scenery');

Event Handling
DOM manipulation often goes hand-in-hand with events. You can listen for user interactions like clicks, keypresses, or mouse movements.

Example: Adding a Click Event

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    alert('Button clicked!');
});

Example: Updating Content on Input

const input = document.querySelector('#name-input');
input.addEventListener('input', () => {
    const display = document.querySelector('#name-display');
    display.textContent = `Hello, ${input.value}!`;
});

Dynamic Element Creation
You can create and append elements dynamically.

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph added dynamically!';
document.body.appendChild(newElement);

Final Thoughts
DOM Manipulation is incredibly powerful, allowing developers to create interactive and dynamic web pages. It forms the foundation of frameworks like React, where DOM updates are handled more efficiently using virtual DOMs.

I’m excited to see how these concepts play out as I progress further in my React Native journey.

Day 6, here I come! 🚀