DOM Manipulation with JavaScript

Day 14/100 of JavaScript Today’s topic : Introduction to DOM The DOM (Document Object Model) represents the HTML structure of a web page as a tree of objects JavaScript can use the DOM to access and manipulate elements dynamically 🔹Selecting elements const heading = document.getElementById("title"); const items = document.querySelectorAll(".item"); 🔹Changing content heading.textContent = "Updated Title"; 🔹Changing styles heading.style.color = "blue"; 🔹Adding elements const newEl = document.createElement("p"); newEl.textContent = "New paragraph"; document.body.appendChild(newEl); 🔑 Key understanding: The DOM allows JavaScript to interact with HTML and update the UI dynamically without reloading the page #Day14 #JavaScript #100DaysOfCode

Day 19/100 of JavaScript 🚀 Today’s topic : Deep dive into DOM Going beyond basic manipulation — focusing on performance, rendering, and efficient updates 🔹Reflow & Repaint - Reflow → layout recalculation (expensive) - Repaint → visual update without layout change Frequent DOM changes can trigger multiple reflows and slow down performance 🔹Minimizing reflows const fragment = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const el = document.createElement("p"); el.textContent = i; fragment.appendChild(el); } document.body.appendChild(fragment); 🔹Caching DOM queries const list = document.getElementById("list"); // reuse instead of querying again list.appendChild(newItem); 🔹Layout thrashing❌ Reading and writing layout repeatedly can hurt performance el.style.width = "100px"; console.log(el.offsetWidth); // forces reflow 🔹Efficient updates - Batch DOM changes - Use class changes instead of multiple style updates - Avoid unnecessary re-rendering DOM manipulation is not just about changing elements, but doing it efficiently to maintain performance #Day19 #JavaScript #100DaysOfCode

Image Swap Functionality using JavaScript (getAttribute & setAttribute): I’m excited to share another JavaScript DOM project where I implemented an image swapping feature using getAttribute() and setAttribute(). In this project, there are two images, and when the “Swap Image” button is clicked: * The first image moves to the second position * The second image moves to the first position * This swapping continues on every click This project helped me understand how we can access and update element attributes dynamically to create interactive UI behavior. Key concepts I practiced: 1. DOM Manipulation – Selecting and updating elements dynamically 2. getAttribute() – Retrieving current image source values 3. setAttribute() – Swapping the src attributes between images 4. Event Handling – Performing actions on button click 5. Logic Building – Implementing swap functionality step by step Through this project, I clearly understood how getAttribute() and setAttribute() work and further strengthened my DOM manipulation and problem-solving skills. Building small projects like this is helping me gain more confidence in JavaScript. Checkout my full project code on github: https://lnkd.in/gqPQptPS Feedback and Suggestions are always welcome! 😊 #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #UIInteraction

The Document Object Model (DOM) was the moment JavaScript stopped being abstract and became real. Before the DOM, I wrote JavaScript that just ran calculations. After the DOM, I could make webpages respond to user actions. Here's the mental model that helped me: The DOM is JavaScript's map of your HTML. Every element is a node. You can find any element, read its content, change its style, and create or delete elements — all with JavaScript. The methods I use constantly: document.querySelector() — find one element document.querySelectorAll() — find all matching elements element.innerHTML — read or change content element.classList.add() / remove() — toggle CSS classes element.appendChild() — add new elements dynamically My first DOM project: a comment box where users type a comment, click submit, and it appears on screen — no page reload. That tiny interaction felt enormous. Do you remember the first time you made a webpage change dynamically? What did you build?

What if your CSS could read DOM state without a single line of JavaScript? CSS :has() makes this real. Form field highlights, tab indicators, card state variants that used to need JS class-toggling can now live entirely in your stylesheet. https://lnkd.in/eaC8d4gU #WebDev #CSS #WebPlatform

Day 15 of My JavaScript Journey 🚀 Today, I was introduced to the basics of HTML. HTML (HyperText Markup Language) is used to structure the content of a web page not to style or add functionality, but to define elements like text, images, and links. I also learned about attributes, classes, and IDs. Classes and IDs are used to name elements so they can be selected in CSS for styling and in JavaScript for DOM manipulation. Key differences: • ID: It must be unique (used once per page) • Class: It's reusable (can be used multiple times) One important insight: HTML provides the structure, CSS handles the design, and JavaScript adds interactivity. Key takeaway: Understanding HTML is the foundation for building and manipulating web pages with JavaScript. #JavaScript #HTML #WebDevelopment #LearningInPublic #100DaysOfCode

Exploring the DOM with a Small Dynamic Project After learning JavaScript basics, I started working with the DOM, and this is where things became more practical and interesting. Instead of just using the console, I built a small interactive project where I can create, update, and delete elements dynamically. What is DOM? The DOM represents HTML as a structure where each element can be accessed and modified using JavaScript. What I learned: Selecting elements: 1. Using getElementById() to access elements. 2. Using querySelector() for flexible selection. DOM Manipulation: 1. Creating elements using createElement(). 2. Adding elements using appendChild(). 3. Updating content dynamically. 4. Removing elements using removeChild(). Styling using DOM: 1. Changing styles dynamically using element.style. 2. Applying properties like color, font size, background, alignment. 3. Understanding how UI can be controlled directly with JavaScript. Event Handling: 1. Using addEventListener() to handle user actions. 2. Performing operations like add, update, and delete. Project I built: 1. Add a new element dynamically. 2. Update existing content. 3. Delete elements from the page. 4. Input-based dynamic list with Edit and Delete options. Project files: HTML → dynamic.html JavaScript → dynamic.js Challenges I faced: 1. Understanding how dynamically created elements behave. 2. Updating and deleting elements without errors. 3. Managing user input and UI updates. 4. Debugging small logic mistakes. How I improved: 1. Broke problems into smaller steps. 2. Used console logs to track execution. 3. Practiced multiple times to understand flow. One important realization: DOM is not just about selecting elements. It is about dynamically controlling the UI and user interaction. Still learning and improving step by step. Would love your feedback. #JavaScript #WebDevelopment #Frontend #CodingJourney #MERN #Learning

This JavaScript library completely changed how I think about text. I’ve been working on my portfolio recently using the Pretext library by Cheng Lou and it’s absurd. Pretext is a JavaScript library that lets you break out of traditional CSS and DOM constraints and build truly dynamic UI. Instead of rendering everything and asking the DOM what happened, with Pretext you compute and measure everything first, then render once. This shift feels small, but it opens the door to more innovative, dynamic interfaces that aren't limited by typical layout rules. Check it out👇 : https://lnkd.in/ghedSc_K Pretext by Cheng Lou: https://lnkd.in/dy2n-utx #pretext #webdev #javascript #react #userinterface

Built a simple digital clock using JavaScript’s Date object. Used basic string formatting and added AM/PM to make it more readable. Also styled it using vanilla CSS. It’s a small project, but it feels great to turn a random idea into something functional. Would love to hear your thoughts and suggestions for improvements.

🚀 Day 4 of #100DaysOfFrontend Built a Real-Time Digital Clock using HTML, CSS, and JavaScript ⏱️ This project helped me understand how to work with the Date object, update the UI dynamically, and use setInterval for real-time functionality. Small project, but a big step in learning JavaScript 💪 🔗 Live Demo: https://lnkd.in/ghiNej6F 💻 GitHub: https://lnkd.in/gZ_z8fDm #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency