What is DOM and how does it work?

View profile for Md. Rayhan
Md. Rayhan

What is DOM and How it works ? The DOM, or Document Object Model, is a programming interface that represents a web page's HTML structure as a tree of objects, allowing developers to interact with and change a page's content, style, and structure using languages like JavaScript. Think of it as a live, in-memory blueprint of the page, where each HTML tag is a node in a hierarchy.  Browser  builds DOM after loading the html .  DOM is a  bridge between Browser and Javascript. Developers can manipulate or interact with web pages through javascript using Dom. Every html tag is an “element node” in DOM. Take a look at the picture below to understand how the DOM tree is created. #React #Javascript #WebDevelopment #Programming

  • diagram
Shehabul Islam 6mo

Thank you

Like
Reply
1 Reaction
Collective Cloud 6mo

Good graphic for understanding the DOM 👍🏼

Like
Reply
1 Reaction
See more comments

To view or add a comment, sign in

More Relevant Posts

  • View profile for Mounika Chakala
    Mounika Chakala

    🧮 Built a scientific calculator using HTML, CSS, and JavaScript. 🔢 Added functions like sin, cos, tan, log, ln, and sqrt. 🔄 Implemented a DEG/RAD mode toggle with localStorage support. 💻 Designed a responsive and modern user interface. ⚠️ Included error handling for invalid inputs and calculations. #HTML #CSS #JavaScript #WebDevelopment #Frontend #CalculatorApp #ScientificCalculator #CodingProject #ResponsiveDesign #TechProject #Programming #JSProject

    To view or add a comment, sign in

  • View profile for Hamilton Ude
    Hamilton Ude

    I discovered my post yesterday on DOM Manipulation was interesting but still did not deliver the context elaborately enough for beginners. So today and 2 days after, I will break it down to more relatable chunks. How does JavaScript actually change the content of a web page after it's already loaded? The answer lies in the DOM (Document Object Model). The Problem: Your HTML is a static text file. The browser can display it, but a text file can't be easily modified by a programming language like JavaScript. We need an interpreter! The Solution: The DOM Tree 🌳 When your browser loads an HTML file, it instantly converts that static text into a live, hierarchical structure called the DOM Tree. Imagine your HTML is a sketch-work of a house. The DOM is the 3D, digital model of that house, built entirely out of objects. Every single thing in your HTML—the <body> tag, a <p> paragraph, an <h1> heading, and even the text inside them - becomes a Node (an object) in this tree. This tree structure organizes elements by their relationships (parent, child, sibling). For example, the <body> is the parent of everything inside it. Why does this matter? Because JavaScript is built to understand and talk to these objects. When you manipulate the DOM, you're not changing the original HTML file; you're changing the live object model that the browser is currently rendering. This is the foundation of all web interactivity! Stay tuned for Day 2, where we reveal the first crucial step to interacting with this tree: Selection! #JavaScriptTutorial #DOMManipulation #WebDevBasics #CodingForBeginners #FrontendDevelopment #DOMSeries

    • Code snippets screen #JavaScriptTutorial #DOMManipulation #WebDevBasics #CodingForBeginners #FrontendDevelopment #DOMSeries

    To view or add a comment, sign in

  • View profile for Lakshmi Narayana Immandi
    Lakshmi Narayana Immandi

    Building an Analog Clock ⏰ Today, I created a fully functional Analog Clock using HTML, CSS, and JavaScript. While coding, I realized how even a simple-looking clock depends on precise logic and timing. I faced challenges syncing all three hands perfectly — especially the seconds and minutes. Debugging those rotations gave me a deeper understanding of how angles and real-time updates work in JavaScript. Here’s the core part of the logic 👇 1️⃣ Seconds Hand 360° ÷ 60 = 6° per second  const secondsDeg = seconds * 6;  2️⃣ Minutes Hand 360° ÷ 60 = 6° per minute  const minutesDeg = minutes * 6;  3️⃣ Hours Hand 360° ÷ 12 = 30° per hour  const hoursDeg = (hours % 12) * 30; Each formula defines how smoothly the hands rotate in real time — and this project gave me a stronger grasp of JavaScript’s time handling and CSS transformations. #WebDevelopment #Frontend #JavaScript #HTML #CSS #LearningByBuilding #CodingJourney

    To view or add a comment, sign in

  • View profile for Shraddha Nigam
    Shraddha Nigam

    🚀 JavaScript Gotchas: var vs let in Loops & setTimeout Same code, different output 👇 Ever wondered why this code prints 5 5 5 5 5 instead of 0 1 2 3 4? for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } 💡 Reason: var is function-scoped — only one i exists for the entire loop. setTimeout callbacks run after the loop finishes, so each callback sees the final value of i → 5. ✅ Fix it with let: for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } let is block-scoped — each iteration gets a new copy of i. Now, callbacks “remember” the correct value of i. ✅ Output: 0 1 2 3 4 💡 Key takeaway: var → shared variable in loop → tricky in async callbacks let → separate variable per iteration → safer & predictable ✨ Tip: Even setTimeout(..., 0) behaves the same! The event loop always runs callbacks after the current synchronous code. #JavaScript #CodingTips #FrontendDevelopment #WebDevelopment #Programming #LearnJS #DeveloperTips #AsyncJavaScript #Closures

    • No alternative text description for this image

    To view or add a comment, sign in

  • View profile for Saif Ali
    Saif Ali

    Understanding the difference between JavaScript's forEach() and map() is crucial for writing efficient code. Both iterate over arrays, but with key differences: forEach() runs a function on each array element without returning a new array. It’s great for side effects like logging or updating UI. map() transforms each element and returns a new array, perfect for data transformation without mutating the original array. Use forEach() when you want to perform actions without changing the array, and map() when you want to create a new array from existing data. Quick example: javascript const numbers = [1, 2, 3]; numbers.forEach(num => console.log(num * 2)); // Just logs the result const doubled = numbers.map(num => num * 2); // Returns [2, 4, 6] Master these to write cleaner, more expressive JavaScript! #JavaScript #WebDevelopment #ProgrammingTips #Coding

    To view or add a comment, sign in

  • View profile for Praveen N
    Praveen N

    ⏱ Built a simple digital timer using HTML, CSS, and JavaScript that continuously runs and displays the current time dynamically on the web page. Displays live time updates in real-time Fully responsive and minimal UI Designed to practice and improve DOM manipulation and JavaScript timing functions (setInterval) 🌐 Live Demo: https://lnkd.in/gTKqh8FJ 🔧 Tech Stack: HTML | CSS | JavaScript #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #Coding #WebProjects #LearningByBuilding #TechProjects #Developer #ReactDeveloper #Vite #Programmer #PortfolioProject

    • No alternative text description for this image

    To view or add a comment, sign in

  • View profile for Aanchal .
    Aanchal .

    💻 Exploring DOM in JavaScript! 🎯 Today, I continued my journey of learning and experimenting with the Document Object Model (DOM) — one of the most exciting parts of JavaScript that helps bring web pages to life! 🌐 Here are some of the amazing tasks I worked on today 👇 🔹 Simple Math Calculator ➕➖✖️➗ – created a basic calculator using DOM manipulation where I handled user input and displayed real-time results. 🔹 Show/Hide Password Feature 🔒👁️ – implemented a toggle feature to hide or reveal the password using simple JS logic. 🔹 Swapping Content Between Two Paragraphs 🔁 – learned how to dynamically exchange content between elements on a click event. 🔹 Generating Random Background Colors 🎨 – added functionality to change the background color randomly, giving a fun interactive touch to the webpage. Each of these tasks helped me understand DOM events, element selection, and manipulation more deeply and improved my problem-solving and logic-building skills in JavaScript. 🚀 You can check out all my DOM tasks here on my GitHub 👇 🔗https://lnkd.in/dAhB6gjM #JavaScript #DOM #WebDevelopment #LearningJourney #FrontendDevelopment #Coding #100DaysOfCode #DeveloperJourney

    To view or add a comment, sign in

  • View profile for Deepak kumar
    Deepak kumar

    Challenge Update: Project 23/30 - The Mini Calendar! 🗓️ Excited to share the latest project from my 30 Days 30 JS Projects Challenge: a clean, dynamically updating Mini Calendar built with HTML, CSS, and vanilla JavaScript. This project was a great exercise in: DOM Manipulation: Fetching the live date, day, month, and year using the native Date object and injecting the data into the HTML. Modern CSS Layouts: Utilizing Flexbox to create the two-part, split-view design and centering the component perfectly on the page with a cool gradient background. Code Structure: Keeping the logic separate and readable in a dedicated <script> block. It's a small component, but a crucial one for mastering JavaScript fundamentals! 🔗 Check out the code and live demo here: https://lnkd.in/g4s4JPMZ #30Days30JSProjects #JavaScript #WebDevelopment #Frontend #HTML #CSS #CodingChallenge

    To view or add a comment, sign in

Md. Rayhan

344 followers

View Profile

Explore content categories