# DOM Basics ## What is the DOM? The **DOM (Document Object Model)** is a programming interface that represents an HTML document as a structured tree of objects. When a browser loads an HTML page, it parses the HTML and creates the DOM — a live, in-memory representation of the page that JavaScript can read and modify. Every HTML element, attribute, and piece of text becomes a **node** in this tree. JavaScript interacts with the DOM to make pages dynamic — changing content, styles, and structure in response to user actions without reloading the page. ``` HTML file → Browser parses → DOM tree created → JavaScript can access and modify it ``` --- ## The DOM Tree The DOM represents an HTML document as a hierarchical tree structure. Each item in the tree is called a **node**. **Example HTML:** ```html My Page

Hello

Welcome to JavaScript

``` **Resulting DOM tree:** ``` Document └── html (root element) ├── head │ └── title │ └── "My Page" (text node) └── body ├── h1 (id="heading") │ └── "Hello" (text node) └── p (class="text") └── "Welcome to JavaScript" (text node) ``` --- ## Types of Nodes | Node Type | Description | Example | |---|---|---| | Document node | The root of the entire DOM | `document` | | Element node | An HTML tag | `

`, `
`, `
` | | Text node | The text content inside an element | `"Hello"` | | Attribute node | An attribute on an element | `id="heading"` | | Comment node | An HTML comment | `` | The most commonly worked with node types are document, element, and text nodes. --- ## The `document` Object The `document` object is the entry point to the DOM. It represents the entire HTML document and provides methods to select, create, and modify elements. ```js console.log(document); // the entire document console.log(document.title); // page title console.log(document.URL); // current URL console.log(document.body); // the element console.log(document.head); // the element console.log(document.documentElement); // the element ``` --- ## DOM Properties — Reading and Modifying Content Once you have selected an element, you can read and change its content, attributes, and styles using properties. ### `innerHTML` Gets or sets the HTML content inside an element — including any child tags. ```html
Hello World
``` ```js const box = document.getElementById("box"); console.log(box.innerHTML); // Hello World box.innerHTML = "Updated content"; // replaces content with new HTML ``` Warning: Never use `innerHTML` to insert user-supplied data — it can execute malicious scripts (XSS attack). ### `textContent` Gets or sets the plain text content inside an element. Ignores all HTML tags — treats everything as text. ```js const box = document.getElementById("box"); console.log(box.textContent); // Hello World — tags stripped out box.textContent = "This will not be bold"; // rendered as plain text, tags shown literally ``` `innerHTML` vs `textContent`: | | `innerHTML` | `textContent` | |---|---|---| | Reads | HTML markup + text | Plain text only | | Writes | Parses and renders HTML | Treats everything as plain text | | Security | Risk of XSS if used with user input | Safe — no script execution | | Use when | You need to insert HTML structure | You need to insert plain text | ### `innerText` Similar to `textContent` but is aware of CSS styling — it returns only the visible text and respects line breaks rendered on screen. ```js box.innerText = "Visible text only"; ``` In most practical cases, use `textContent` for performance and reliability. Use `innerText` only when you need to match exactly what is visually rendered. --- ## DOM Attributes ### Reading Attributes ```html ``` ```js const img = document.getElementById("photo"); console.log(img.src); // full URL to cat.jpg console.log(img.alt); // A cat console.log(img.getAttribute("src")); // cat.jpg (as written in HTML) console.log(img.getAttribute("class")); // image ``` ### Setting Attributes ```js img.src = "dog.jpg"; img.alt = "A dog"; img.setAttribute("src", "dog.jpg"); img.setAttribute("data-id", "42"); // useful for custom data attributes ``` ### Removing Attributes ```js img.removeAttribute("alt"); ``` ### Checking if an Attribute Exists ```js console.log(img.hasAttribute("alt")); // true or false ``` --- ## DOM Styles ### Inline Styles — `element.style` Directly set or read individual CSS properties on an element using camelCase property names. ```js const heading = document.getElementById("heading"); heading.style.color = "red"; heading.style.fontSize = "24px"; // camelCase, not font-size heading.style.backgroundColor = "yellow"; heading.style.display = "none"; // hide element heading.style.display = "block"; // show element ``` Inline styles have the highest CSS specificity and override any stylesheet rules. ### CSS Classes — `classList` The preferred way to change styles. Add, remove, or toggle CSS class names instead of writing inline styles directly. ```js const box = document.getElementById("box"); box.classList.add("active"); // add a class box.classList.remove("active"); // remove a class box.classList.toggle("active"); // add if missing, remove if present box.classList.contains("active"); // true or false box.classList.replace("old", "new"); // replace one class with another ``` Why use `classList` over `style`: - Keeps styling in CSS files — separation of concerns. - Easier to manage multiple styles at once. - Toggle animations and state changes cleanly. ```css /* In CSS */ .active { background-color: blue; color: white; border-radius: 4px; } ``` ```js // In JavaScript — just toggle the class button.classList.toggle("active"); ``` --- ## The Relationship Between HTML and the DOM The DOM is not the same as the HTML source code. The browser may correct invalid HTML when building the DOM. More importantly, JavaScript can change the DOM after the page loads — the HTML source stays the same but the DOM (and what you see on screen) changes. ```js // This changes the DOM — the page updates immediately document.body.style.backgroundColor = "lightblue"; // The original HTML file is completely unaffected ``` --- ## How JavaScript Connects to HTML JavaScript is connected to an HTML page using the ` ``` ### Script Placement Scripts should be placed before the closing `` tag or use the `defer` attribute. This ensures the HTML is fully parsed and the DOM is ready before the script runs. ```html
Hello
``` ```html ``` If a script in `` tries to select an element before the HTML is parsed, it gets `null`: ```html
Hello
``` --- ## `DOMContentLoaded` Event If a script must be placed in ``, listen for the `DOMContentLoaded` event. It fires when the HTML is fully parsed and the DOM is ready — before images and stylesheets finish loading. ```js document.addEventListener("DOMContentLoaded", function () { const heading = document.getElementById("heading"); console.log(heading.textContent); // Hello — DOM is ready }); ``` --- ## DOM vs BOM JavaScript in the browser has access to two environments: | | DOM | BOM | |---|---|---| | Full name | Document Object Model | Browser Object Model | | Represents | The HTML document | The browser window and its features | | Entry point | `document` | `window` | | Examples | `document.getElementById()`, `document.body` | `window.alert()`, `window.location`, `window.history`, `window.setTimeout()` | The `window` object is the global object in the browser. Everything is technically a property of `window`: ```js window.document === document; // true window.console === console; // true window.setTimeout === setTimeout; // true ``` --- ## Summary ``` DOM | |-- What it is | A tree of objects representing an HTML document | Created by the browser when it loads a page | JavaScript can read and modify it in real time | |-- The document object | Entry point to the DOM | document.body, document.head, document.title | |-- Node types | Document, Element, Text, Attribute, Comment | |-- Content properties | innerHTML → read/write HTML content (XSS risk with user input) | textContent → read/write plain text (safe) | innerText → visible text only, CSS-aware | |-- Attributes | element.src, element.alt, element.id | getAttribute / setAttribute / removeAttribute / hasAttribute | |-- Styles | element.style.property → inline styles (camelCase) | element.classList → add, remove, toggle, contains | |-- Script placement | Before or use defer attribute | DOMContentLoaded — fires when DOM is ready ``` Key rules to remember: - The DOM is a live tree — changes made by JavaScript update the page instantly. - `document` is the entry point — everything starts from it. - Use `textContent` to insert plain text safely. Use `innerHTML` only when you need to render HTML structure. - CSS property names in JavaScript use camelCase — `font-size` becomes `fontSize`. - Prefer `classList` over inline `element.style` to keep styling in CSS. - Always place scripts before `` or use `defer` so the DOM is ready when the script runs. - The DOM and the original HTML source are not the same thing — JavaScript changes the DOM, not the file.

DOM Basics

Introduction

DOM Basics