Learning JavaScript DOM manipulation with document.getElementById() and querySelector()

Day 14 - JavaScript DOM Manipulation (Selecting & Updating Elements) We're moving forward in our 30 Days Web Development Learning Series by exploring JavaScript DOM Manipulation! DOM Manipulation is where JavaScript truly comes to life — it allows us to dynamically access and update the content, structure, and style of a webpage without reloading it. In this post, we break down: What is DOM: The Document Object Model is a tree-like representation of your HTML page that JavaScript can access and modify through its nodes and elements. getElementById & querySelector: Two powerful methods to select HTML elements — getElementById targets a unique ID while querySelector works with any CSS selector like a class or tag name. innerText vs innerHTML: innerText updates only the visible plain text of an element, while innerHTML allows you to insert and render actual HTML content inside it. Changing Styles: Learn how to dynamically modify the CSS properties of any element directly through JavaScript using the style property. Mastering DOM Manipulation is the bridge between static HTML pages and fully interactive web applications. #WebDevelopment #JavaScript #DOMManipulation #FrontendDevelopment #CodingSeries #TryunitySolutions #LearnToCode #ProgrammingBasics

🚀 Web Development Journey - JavaScript Day 10 Today was all about going deeper into DOM manipulation, actually controlling and modifying elements on a web page using JavaScript. Here’s what I worked on: 🔹 Adding & Positioning Elements appendChild() append() prepend() after() insertBefore() 🔹 Working with Content textContent innerHTML insertAdjacentHTML() 🔹 Replacing, Cloning & Removing Elements replaceChild() cloneNode() removeChild() 🔹 Working with Attributes getAttribute() setAttribute() hasAttribute() removeAttribute() This stage really shows how powerful JavaScript is, not just writing logic, but dynamically shaping what users see and interact with in real time. Next up: Manipulating element styles with JavaScript 🎯 #WebDevelopment #JavaScript #100DaysOfCode #FrontendDevelopment #LearningInPublic #DOM

Today I practiced JavaScript DOM Manipulation using HTML, CSS, and JavaScript in Google Colab. In this small hands-on project, I implemented a few beginner-level interactive features: 🔹 Adding two numbers using input fields and displaying the result dynamically 🔹 Built a simple “Guess the Number” game using JavaScript logic 🔹 Changed the color of a box using a button click with CSS and JavaScript 🔹 Dynamically resized elements using class manipulation 🔹 Created and appended HTML elements (<h1>) dynamically using JavaScript These exercises helped me understand: • How to use DOM Manipulation • Handling button click events • Updating HTML content dynamically with JavaScript • Basic interactive web development concepts Learning step by step and building small projects every day. Looking forward to learning more about frontend development and JavaScript. #JavaScript #HTML #CSS #WebDevelopment #DOMManipulation #CodingJourney #LearningInPublic

🚀 30 Days of JavaScript – Day 17 Today I moved from basic JavaScript programs to building a real frontend feature using HTML, CSS, and JavaScript. 💡 Project: Signup Form with Validation This form is not just UI — it includes real user interaction and validation logic. ✅ Features: • Validates name, email, and password • Shows error messages near input fields • Prevents page reload on submit • Displays success message after valid submission • Automatically clears the form 🧠 Concepts Used: • DOM manipulation • event handling (addEventListener) • form validation logic • conditional statements • basic UI styling with CSS 📌 This helped me understand how real websites handle user input and validation. 🎥 Demo below 👇 👉 Source code in first comment (only JS Code). #JavaScript #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningJavaScript #CodingJourney

Day 3 of 30 Days of JavaScript........#Javascript30 Today I built an Interactive CSS Variables Controller 🎛️ This helped me understand how JavaScript can directly interact with CSS in real-time. By using input sliders, I was able to dynamically update: • Image spacing 📏 • Blur effect 🌫️ • Base color 🎨 💡 What I learned today: - Working with dataset for dynamic values. - How small mistakes in template literals can completely break functionality. - Understanding the :root selector and how it acts like a global storage for CSS variables. - Realizing how CSS variables (--variable) are similar to variables in programming and can be reused across the UI. This was a simple project, but it gave me a deeper understanding of how JavaScript + CSS work together to create interactive UI. Looking forward to building more and improving step by step 💻🔥 #JavaScript #WebDevelopment #FrontendDevelopment #Javascript30

Day 20🚀 #𝟯𝟬𝗗𝗮𝘆𝘀𝗼𝗳𝗰𝗼𝗱𝗶𝗻𝗴 HTML, CSS, BOOTSTRAP, JAVASCRIPT👨🏼💻 🚀 Today I started building a small interactive quiz application using HTML, Bootstrap, and JavaScript. This simple project helped me practice how JavaScript interacts with the DOM and handles user input in real time. Even a small feature like validating a quiz answer gave me better insight into event handling and UI updates. 💡 Key Takeaways from this project: 🔹 Practiced DOM manipulation using getElementById() to access and control HTML elements. 🔹 Implemented event listeners (addEventListener) to respond to user actions like selecting radio buttons and submitting the form. 🔹 Captured the user’s selected option using the change event and event.target.value. 🔹 Handled form submission logic and prevented page refresh using event.preventDefault(). 🔹 Added basic form validation to ensure the user selects an option before submitting. 🔹 Compared the selected answer with the correct value stored in a variable. 🔹 Displayed dynamic feedback messages like “Correct Answer” and “Wrong Answer”. 🔹 Updated the UI dynamically using textContent and style properties. ✨ Small steps like these are helping me build a stronger foundation in JavaScript and Frontend Development. #NxtWave #CCBP #Day20 #HTML #CSS #bootstrap #FrontendDevelopment #MiniProject #30DaysOfCode #MERN #JavaScript #WebDevelopment #LearningJourney #BuildInPublic

Just built a simple yet functional Stopwatch using HTML, CSS, and JavaScript ( This project helped me strengthen my understanding of: • DOM manipulation • Event handling (Start, Stop, Reset) • Time logic and intervals in JavaScript • Structuring clean and responsive Ul with CSS Watching the timer run in real-time after writing the logic from scratch was a satisfying moment. Small projects like this continue to sharpen my problem-solving skills and build my confidence as a developer. Next step: improving the design and adding more advanced features #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #SoftwareEngineering

🚀 Learning JavaScript DOM – Let’s Grow Together! I’ve recently started exploring the DOM (Document Object Model) in JavaScript, and it completely changed how I look at web development. Before this, HTML felt static… but with DOM, it becomes dynamic and interactive. Here’s what I’ve learned so far: ✔ How to select elements from a webpage ✔ How to change content and styles using JavaScript ✔ How to handle user actions like clicks and inputs ✔ How to make webpages respond in real-time Now I’m curious to learn more and improve my skills further 💡 👉 I’d love to hear from you: - How did you master DOM concepts? - Any tips, resources, or projects you recommend? - What should I focus on next? Let’s share knowledge and grow together as developers 🤝 #JavaScript #WebDevelopment #Frontend #Learning #DOM #CodingJourney

🚀 Mini Project #2 :- Random Quote Generator Today I created a Mini Project – Random Quote Generator using HTML, CSS, and JavaScript 💻✨ In this project, a new quote automatically appears every 2–3 seconds without clicking any button. JavaScript randomly selects a quote from a list and updates it on the screen, making the page dynamic and engaging. 🔹 What I practiced: ✅ DOM Manipulation(DOM Manipulation means changing or controlling the content, structure, or style of a webpage using JavaScript. 💻) ✅ Using Math.random() for random selection ✅ Using setInterval() to update quotes automatically ✅ Creating a simple interactive UI with HTML & CSS Small projects like this help me understand how JavaScript makes websites dynamic and interactive. If you have any suggestions or ideas for improvement, feel free to share them. I’d love to learn and improve! 😊 #Day21 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingJourney #100DaysOfCode

🚀 Web Development Journey - JavaScript Day 9 Today I stepped into one of the most important parts of JavaScript: the Document Object Model (DOM), where JavaScript truly starts interacting with web pages. Here’s what I covered: 🔹 Understanding the DOM Learned how the browser represents HTML as a structured tree (DOM Tree), making it possible to interact with elements programmatically. 🔹 Node Relationships Explored how elements are connected, parent, child, and sibling relationships, which is key for navigating the DOM effectively. 🔹 Selecting Elements Practiced different ways to target elements: getElementById getElementsByClassName getElementsByTagName querySelector() querySelectorAll() 🔹 Traversing Elements Learned how to move through the DOM using properties like: parentNode childNodes nextElementSibling previousElementSibling 🔹 Manipulating Elements Started creating and modifying elements dynamically using JavaScript (e.g., createElement). This is where things start to feel real, moving from writing logic to actually controlling what users see and interact with. Next up: Appending elements to the DOM (appendChild) 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment #DOM