𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝗲𝗿𝗶𝗲𝘀 – 𝗗𝗮𝘆 𝟭𝟬: 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝘁𝗼 𝗗𝗢𝗠 (𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗢𝗯𝗷𝗲𝗰𝘁 𝗠𝗼𝗱𝗲𝗹) The DOM allows JavaScript to interact with HTML elements. It represents the structure of a web page so JavaScript can read, change, and control content dynamically. 𝗪𝗵𝗮𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗮𝗻 𝗗𝗼 𝗨𝘀𝗶𝗻𝗴 𝗗𝗢𝗠 • Access HTML elements • Change text and HTML content • Change styles and attributes • Respond to user actions 𝗦𝗲𝗹𝗲𝗰𝘁 𝗮𝗻 𝗘𝗹𝗲𝗺𝗲𝗻𝘁 document.getElementById("title"); 𝗖𝗵𝗮𝗻𝗴𝗲 𝗧𝗲𝘅𝘁 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 document.getElementById("title").innerText = "Hello JavaScript"; 𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝘆𝗹𝗲 document.getElementById("title").style.color = "blue"; 𝗞𝗲𝘆 𝗣𝗼𝗶𝗻𝘁𝘀 • DOM connects JavaScript with HTML • Changes happen instantly on the page • DOM manipulation is the foundation of frontend development 𝗧𝗼𝗱𝗮𝘆’𝘀 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 • Create an HTML element with an id • Change its text using JavaScript • Change its color or background Next, we continue with Events and Event Handling in JavaScript. #JavaScriptSeries #Day10 #LearnJavaScript #DOM #JavaScriptBasics #FrontendDevelopment #CodingJourney #techgian
JavaScript DOM Basics: Accessing and Manipulating HTML Elements
More Relevant Posts
-
Day 60 – JavaScript Basics & Script Integration Today I focused on understanding JavaScript fundamentals and its importance in web development as a scripting language used to add interactivity and dynamic behavior to websites. Topics covered: JavaScript Overview JavaScript as a scripting language Its role in both front-end and back-end development Importance in modern website development Using JavaScript in HTML Linking external JavaScript files using the <script> tag with the src attribute Safe script placement after CSS linking or at the end of the <body> to ensure proper execution and avoid loading issues Understanding internal scripting using <script></script> within HTML Execution & Usage Running HTML files directly for testing Using JavaScript mainly for handling events such as button clicks, animations, form validation, sliders, and other user interactions These concepts are essential for building interactive, responsive, and user-friendly web applications while maintaining clean and structured code. A solid step forward in strengthening core JavaScript knowledge. Continuing the learning journey with consistency and focus. #JavaScript #WebDevelopment #FrontendDevelopment #ScriptingLanguage #HTML #CSS #LearningJourney
-
𝐇𝐨𝐰 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬 𝐥𝐨𝐚𝐝𝐞𝐝 𝐢𝐧 𝐇𝐓𝐌𝐋 𝐜𝐚𝐧 𝐚𝐟𝐟𝐞𝐜𝐭 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞, 𝐫𝐞𝐥𝐢𝐚𝐛𝐢𝐥𝐢𝐭𝐲, 𝐚𝐧𝐝 𝐞𝐯𝐞𝐧 𝐰𝐡𝐞𝐭𝐡𝐞𝐫 𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 𝐰𝐨𝐫𝐤𝐬 𝐚𝐭 𝐚𝐥𝐥. This is something I properly understood recently, and it made me realize that script loading isn’t just a small detail we can ignore. Before now, based on how I was initially taught, I used to place script tags at the bottom of my HTML file just before the closing body tag so the HTML would load first before JavaScript runs. While that approach works, I recently learned that there are actually structured and more optimized ways browsers handle script loading. There are three different ways to add JavaScript to an HTML page, • The regular method • The async method • The defer method and each one behaves differently in the browser. The regular script method pauses HTML parsing to download and execute JavaScript, which can slow down rendering and sometimes lead to issues when the DOM isn’t ready. Using async allows JavaScript to download while HTML continues parsing, but it runs as soon as it’s ready, making execution order unpredictable and unsuitable for scripts that depend on the DOM. The defer method stood out as the most recommended option because it downloads scripts alongside HTML, waits until the DOM is fully parsed, and executes scripts in order, making it both performant and reliable for most applications. This is another reminder that writing good JavaScript isn’t only about syntax, but also about when and how the browser runs it. #JavaScript #WebDevelopment #Frontend #LearningInPublic #TechJourney #Growth
-
-
#Day 58/100 – Why JavaScript is Single-Threaded (and why that’s actually powerful) ⚡ When I first heard “JavaScript is single-threaded” I thought… Wait — only one thing at a time? Isn’t that slow? But today I understood something important. JavaScript being single-threaded is not a weakness. It’s the reason the web feels smooth. Imagine editing a form and suddenly the page freezes because 5 things run at once. That would be chaos. Instead, JavaScript follows a rule: Do one thing clearly, finish it, then move to the next. This makes UI predictable and prevents race conditions. But then how do videos load, APIs fetch data, and timers run? Because the browser handles heavy work in the background and JavaScript handles the result when it’s ready. So JS stays simple. The browser stays powerful. Big realization 💡 JavaScript isn’t trying to do everything at once — it’s trying to do everything in order. And that’s why websites don’t constantly break. Today I stopped thinking “single-threaded = limitation” Now I see “single-threaded = stability” #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment #CodingJourney
-
-
Does JavaScript use DOM and BOM? Explain.” Here’s how I answered: Yes ✅ JavaScript uses both DOM and BOM inside the browser environment. 📌 DOM (Document Object Model) The DOM represents the HTML document as a tree structure. With DOM, JavaScript can: Select elements (getElementById, querySelector) Change content (innerHTML) Modify styles (style.color) Handle events (addEventListener) 👉 DOM is used to control and manipulate the webpage content. 📌 BOM (Browser Object Model) The BOM allows JavaScript to interact with the browser window. It includes objects like: window location navigator history screen Examples: Redirecting using window.location Showing alerts using alert() Checking browser details using navigator 👉 BOM is used to control browser features, not just the webpage. 🎯 Short Interview Answer: “JavaScript uses DOM to manipulate webpage elements and BOM to interact with browser-related features like navigation and alerts.” Small concepts, but very important for frontend interviews 🚀 hashtag #JavaScript hashtag #FrontendDeveloper hashtag #InterviewPreparation hashtag #WebDevelopment hashtag #LearningJourney
-
DOM in javaScript: The Document Object Model (DOM) might sound like a complex term, but it’s actually a very simple concept that gives life to our web pages! What is the DOM? It is a Programming Interface that converts an HTML document into a "Tree Structure." This tree allows JavaScript to see every element on your page as an Object. Once JavaScript can access these objects, it gains the power to dynamically change content, structure, or style. What do we mean by "Dynamic Changes"? Imagine a "Like" button. When you click it, the number increases from 10 to 11 instantly without the entire page reloading. No Browser Refresh. Immediate Feedback. Seamless Experience. Why it matters: Without the DOM, JavaScript wouldn't have a way to "talk" to your HTML. It is the bridge that turns a static document into an interactive application. Visualizing the DOM Tree: Window └── Document (your web page) └── HTML ├── Head (Metadata) └── Body (content of web page) ├── h1 (Text Node: "Hello World") └── div (Container) └── p (Text Node: "This is a paragraph") #WebDevelopment #JavaScript #Frontend #CodingTips #DOM #LearnToCode #Programming #TechCommunity
-
Login Form Project using HTML, CSS & JavaScript I built a simple Login Form with User List as part of my JavaScript learning journey. In this project, users can enter their username and password, and the entered data is dynamically displayed in a table below using DOM manipulation. The user list remains hidden initially and is shown only when the “Show Users” button is clicked. Key features: User input handling using JavaScript Dynamic table row creation Show/Hide user list functionality Clean and simple UI Built without any external libraries This project helped me understand DOM, events, functions, and real-world JS logic more clearly. More projects coming soon #JavaScript #HTML #CSS #WebDevelopment #Frontend #LearningByDoing #BeginnerProject
-
Just built a simple calculator using HTML, CSS, and JavaScript! This project gave me hands-on experience with DOM manipulation, event handling, and dynamic UI updates ○ Key learnings: ⁃ Handling button clicks with event listeners ⁃ Using string operations for calculations - Updating input fields in real-time This is a small step, but it boosted my confidence in frontend development Looking forward to adding more features like calculation history and scientific functions., ◦ Feedback and suggestions are most welcome #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #BeginnerProject
-
#Day 59/100 – What Happens Before Your Page Loads in JavaScript? Today I learned something surprising… JavaScript actually runs before the page fully loads on the screen. I always thought: Browser loads HTML → then CSS → then JavaScript. But reality is more interesting 👇 When the browser reads HTML, it doesn’t wait till the end. The moment it finds a <script> tag, it stops building the page and executes JavaScript immediately. This process is called parsing + blocking execution. So the flow becomes: HTML reading ➝ sees JS ➝ pause ➝ run JS ➝ continue building page That’s why sometimes: • Page looks blank for a second • Buttons don’t appear instantly • UI feels slow Because JS is literally interrupting the page construction. 💡 Important concepts I understood today: 🔹 Rendering – browser drawing UI 🔹 Parsing – browser reading HTML line by line 🔹 Blocking scripts – JS pauses page creation 🔹 defer & async – solutions to avoid blocking Big realization: Bad script placement can make a fast website feel slow. Good script placement can make the same website feel instant. Small detail… huge impact. Every day I learn — frontend is not just coding, it’s understanding how the browser thinks 🧠 #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney
-
-
This video shows a beginner-level JavaScript project built using HTML, CSS, and JavaScript. The main focus is on practicing HTML DOM tree manipulation. When a user clicks on different buttons (Spring, Summer, Autumn, Winter), JavaScript dynamically changes the image using DOM element selection and event handling. This project helped me understand how JavaScript interacts with the DOM and updates content based on user actions. #JavaScript #HTML #CSS #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #JavaScriptBasics #BeginnerProject #LearningJavaScript #nxtwave
-
"I created the element… so why isn't it on my screen?" 🧐 If you are someone who is just stepping into the world of JavaScript — this post is for you. And if you have never written a single line of code in your life, don't scroll away. I've got you too. You write your code, you define your element… and the browser just stares back at you. Blank. Here's the "Aha!" moment that changed how I used to think about the DOM in my starting phase if you are also the one ..here is a short read for you : When you use document.createElement("h3"), JavaScript creates that element in memory — not on the page. Not a programmer? Here's all you need to know: Imagine you're a chef. You just cooked a beautiful dish in the kitchen. It's ready, it smells amazing — but you haven't served it to the table yet. Your guests have no idea it exists. createElement is you cooking. append is you walking out and placing it in front of them. No serving = no dish on the table. Simple as that. 🍽️ Now for the code side of things: 🏗️ Step 1: The Workshop JS- const heading = document.createElement("h3"); heading.textContent = "Hello, World! 👋"; You just built a sign in your workshop. It exists. You can touch it, style it, write on it. But it's still sitting in your workshop — the world hasn't seen it yet. 🖼️ Step 2: The Gallery JS- document.body.append(heading); This is you driving to the gallery and hanging that sign on the wall. Now the world can see it. The real power? You can build 100 elements behind the scenes, style them, fill them with data, and only show them to the user when they're perfectly ready. That's not a bug — that's JavaScript giving you total control. 💡 Nothing shows up until you append. You're the architect. append() is your moment to open the doors. Don't let a blank screen discourage you. You're not doing it wrong — you just haven't hung your sign yet. 🔨 #javascript #codenewbie #dommanipulation
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development