JavaScript DOM – Document Manipulation

JavaScript DOM (Document Object Model) is a document object model that represents HTML/SVG/XML as a tree of nodes in memory. JavaScript can access and modify these nodes. The container with the HTML is described by the Document interface (extended to HTMLDocument for HTML). The Element interface is enhanced into HTMLElement and various subclasses (e.g., HTMLDivElement, HTMLInputElement …). The HTML DOM API allows the management of content, styles, attributes, events, and more. The DOM represents a document as a logical tree. Each branch ends with a node; nodes are objects. Using DOM methods, we can programmatically read and change the structure, styles, or content. We can attach event handlers to nodes, which are triggered by clicks, typing, focuses, etc.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM – Basic Examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        * { 
            box-sizing: border-box; 
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            padding: 16px;
            line-height: 1.5;
        }
        .primer {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 12px 14px;
            margin-bottom: 16px;
        }
        .primer h2 { 
            margin: 0 0 8px; 
            font-size: 1.05rem; 
        }
        .okvir {
            padding: 10px;
            border: 1px solid #9ca3af;
            border-radius: 6px;
        }
        
        #p2 {
            display: inline-block;
            cursor: pointer;
            border: 1px solid #9ca3af;
            border-radius: 6px;
            padding: 8px 10px;
        }
        #p2.poudarjen {
            color: #1e40af;
            border-color: #fe5849;
            transform: translateY(-1px);
        }
        
        .stolp {
            position: relative;
            width: 60px;
            height: 320px;
            border: 1px dashed #9ca3af;
            border-radius: 6px;
            background: repeating-linear-gradient(
                to bottom,
                #f8fafc, #f8fafc 16px,
                #eef2f7 16px, #eef2f7 32px
            );
        }
        .krog {
            position: absolute;
            left: 5px;
            top: 5px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #fde047;
            border: 1px solid #0f172a;
            cursor: pointer;
            transition: box-shadow .15s ease;
        }
        .krog:active { 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20); 
        }
        @media (prefers-reduced-motion: reduce) {
            .krog { transition: none; }
        }
        /* Accessibility (visual focus only) */
        :focus-visible { 
            outline: 2px solid #60a5fa; 
            outline-offset: 2px; 
        }
    </style>
</head>
<body>
    <div class="primer" id="primer1">
        <h2>Example 1 – innerHTML and Input Validation</h2>
        <div class="okvir">
            <p id="uvod"></p>
            
            <label for="stevilo">Enter a number (1–10):</label>
            <input id="stevilo" type="text" inputmode="numeric" 
                pattern="[0-9]*" aria-describedby="navodilo">
            <button id="potrdi" type="button">Verify</button>
            <div id="navodilo" style="font-size:.9rem; margin-top:6px;">
                This example checks if the input value is between 1 and 10.
            </div>
        
            <p id="rezultat" class="okvir" style="margin-top:10px; color: #4CAF50;"></p>
        </div>
    </div>
    
    <div class="primer" id="primer2">
        <h2>Example 2 – Style Modification via Class</h2>
        <p>Click the element to toggle the emphasis effect.</p>
        <p id="p2">Modify Style</p>
    </div>
    
    <div class="primer" id="primer3">
        <h2>Example 3 – Animation using requestAnimationFrame</h2>
        <p>Click the yellow circle – it will move down and back up.</p>
        <div class="stolp" aria-label="Animation Area">
            <div id="krog" class="krog" role="button" tabindex="0" aria-label="Start Animation"></div>
        </div>
    </div>

    <script>
        // Example 1
        const uvod = document.getElementById("uvod");
        const vnos = document.getElementById("stevilo");
        const potrdi = document.getElementById("potrdi");
        const rezultat = document.getElementById("rezultat");
        
        uvod.innerHTML = "Welcome to my JavaScript tutorial!";
        
        potrdi.addEventListener("click", () => {
            const raw = vnos.value.trim();
            const num = Number(raw);
            if (!Number.isInteger(num) || num < 1 || num > 10) {
                rezultat.innerHTML = "Invalid input, please enter a number from 1 to 10.";
                rezultat.style.color = "#b91c1c";
            } else {
                rezultat.innerHTML = "The entered value is correct.<br>You entered the number " + num;
                rezultat.style.color = "#065f46";
            }
        });
        
        // Example 2
        const p2 = document.getElementById("p2");
        p2.addEventListener("click", () => {
            p2.classList.toggle("poudarjen");
        });
        
        // Example 3
        const krog = document.getElementById("krog");
        const stolp = krog.parentElement;
        
        function animateCircle() {
            const h = stolp.clientHeight;
            const r = krog.clientHeight; // circle size (48px)
            const maxY = h - r - 5; // bottom limit (with small padding)
            const trajanje = 900; // ms for moving down or up
            const zacetek = performance.now();
        
            function easeInOut(t) {
                // standard ease-in-out curve
                return t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2;
            }
            
            function frame(now) {
                const dt = now - zacetek;
                const t = Math.min(dt / trajanje, 1);
                const y = Math.round(easeInOut(t) * maxY);
                krog.style.transform = "translateY(" + y + "px)";
                
                if (t < 1) {
                    requestAnimationFrame(frame);
                } else {
                    // circle moves back up
                    const zacetekNazaj = performance.now();
                    function frameUp(now2) {
                        const dt2 = now2 - zacetekNazaj;
                        const t2 = Math.min(dt2 / trajanje, 1);
                        const y2 = Math.round((1 - easeInOut(t2)) * maxY);
                        krog.style.transform = "translateY(" + y2 + "px)";
                        if (t2 < 1) requestAnimationFrame(frameUp);
                    }
                    requestAnimationFrame(frameUp);
                }
            }
        
            requestAnimationFrame(frame);
        }
        
        krog.addEventListener("click", animateCircle);
        krog.addEventListener("keydown", (e) => {
            if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                animateCircle();
            }
        });
    </script>
</body>
</html>

RESULT

DOM Object Model

With the DOM object model, JavaScript gains full power to create dynamic, interactive pages.

JavaScript can change all HTML elements on the web page.
JavaScript can change all HTML attributes on the web page.
JavaScript can change CSS styles (via style or classList).
JavaScript can remove existing elements and attributes.
JavaScript can add new elements and attributes.
JavaScript can react to all HTML events.
JavaScript can define and trigger its own custom events.

W3C DOM Standards

The DOM is a W3C standard – a platform- and language-neutral interface for dynamic access and updating of the content, structure, and style of a document. It is divided into:

Core DOM: The standard model for all document types.
XML DOM: The standard model for XML documents.
HTML DOM: The standard model for HTML documents.

Complete DOM Overview (Cheat Sheet)

The table below displays a comprehensive overview of all key DOM concepts, methods, and events. It is divided into sections for easier searching: element selection, navigation, content modification, styles, and a detailed overview of all important DOM events.

Name	Description	Syntax	Example
1. Selecting Elements (Document)
getElementById()	Finds and returns the element with the specified ID (unique). Returns a single element or null.	`document.getElementById("id")`	`const submitBtn = document.getElementById("btn-submit");`
querySelector()	Returns the FIRST element that matches the specified CSS selector. Extremely flexible.	`document.querySelector("selector")`	▶ Code Example
querySelectorAll()	Returns a static list of all elements (NodeList) that match the CSS selector.	`document.querySelectorAll("selector")`	▶ Code Example
getElementsByClassName()	Returns a live collection (HTMLCollection) of all elements with the specified class name.	`document.getElementsByClassName("class")`	`const deleteBtns = document.getElementsByClassName("btn-delete");`
getElementsByTagName()	Returns a live collection (HTMLCollection) of all elements with the specified tag name.	`document.getElementsByTagName("tag")`	`const paragraphs = document.getElementsByTagName("p");`
2. Modifying Content and Attributes
textContent	Reads or sets the text content of the element and its descendants (ignores HTML).	`element.textContent = "text";`	`title.textContent = "W3C DOM Standards";`
innerHTML	Reads or sets the full HTML structure inside the element (beware of XSS security risks).	`element.innerHTML = "html";`	`alertBox.innerHTML = "Important notice!";`
value	Reads or sets the current value of input fields (input, select, textarea).	`inputElement.value = "value";`	`const searchVal = document.getElementById("search").value;`
setAttribute()	Adds a new attribute or changes the value of an existing attribute on the element.	`element.setAttribute("name", "value")`	`image.setAttribute("src", "images/logo.png");`
getAttribute()	Returns the current value of a specified attribute on the element (or null if it does not exist).	`element.getAttribute("name")`	`const linkHref = link.getAttribute("href");`
removeAttribute()	Removes a specified attribute from the element.	`element.removeAttribute("name")`	`inputField.removeAttribute("disabled");`
dataset	Provides access to all custom data attributes (data-*).	`element.dataset.propertyName`	`const productId = btn.dataset.productId; // data-product-id`
3. Modifying CSS Styles and Classes
style	Allows direct adding or reading of inline CSS styles (using camelCase notation).	`element.style.property = "value";`	`notice.style.backgroundColor = "#ff0000";`
classList.add()	Adds one or more CSS classes to the element without overwriting existing ones.	`element.classList.add("class")`	`btn.classList.add("btn-active");`
classList.remove()	Removes one or more CSS classes from the element.	`element.classList.remove("class")`	`btn.classList.remove("hidden");`
classList.toggle()	Toggles a class: if the class exists, removes it; if it does not exist, adds it.	`element.classList.toggle("class")`	`menu.classList.toggle("open");`
classList.contains()	Checks whether the element contains a specific CSS class (returns true or false).	`element.classList.contains("class")`	`if (box.classList.contains("visible")) { ... }`
4. Creating and Modifying Structure (DOM Tree)
createElement()	Creates a new HTML element in memory, which must then be inserted into the DOM.	`document.createElement("tag")`	`const newRow = document.createElement("tr");`
append()	Inserts a set of DOM objects or text nodes at the END of the selected parent.	`parent.append(child)`	`list.append(newElement);`
prepend()	Inserts a set of DOM objects or text nodes at the BEGINNING of the selected parent.	`parent.prepend(child)`	`table.prepend(tableHeader);`
remove()	Removes the element directly from the DOM tree.	`element.remove()`	`oldRow.remove();`
5. Navigating Between Elements and Nodes
parentElement	Returns the direct parent of the selected element.	`element.parentElement`	`const divWrapper = btn.parentElement;`
children	Returns a live HTMLCollection of all child elements.	`element.children`	`const allParagraphs = container.children;`
nextElementSibling	Returns the next sibling element on the same level.	`element.nextElementSibling`	`const nextField = currentField.nextElementSibling;`
previousElementSibling	Returns the previous sibling element on the same level.	`element.previousElementSibling`	`const label = inputField.previousElementSibling;`
6. Event Management (Mechanics)
addEventListener()	Attaches an event listener to an element.	`element.addEventListener("event", function)`	▶ Code Example
removeEventListener()	Removes an event listener from an element.	`element.removeEventListener("event", function)`	`window.removeEventListener("resize", refreshMenu);`
preventDefault()	Prevents the default behavior of the event (e.g., prevents page reload upon form submission).	`event.preventDefault()`	`e.preventDefault();`
stopPropagation()	Prevents the further propagation (bubbling) of the event up the DOM tree.	`event.stopPropagation()`	`e.stopPropagation();`
target	Returns the element that actually triggered the event (excellent for event delegation).	`event.target`	`const selected = e.target;`
→ Mouse Events
click	Fires when the user clicks (presses and releases a button) on an element.	`element.addEventListener("click", fn)`	`btn.addEventListener("click", () => { ... });`
dblclick	Fires when the user double-clicks on an element.	`element.addEventListener("dblclick", fn)`	`image.addEventListener("dblclick", enlargeImage);`
mousedown / mouseup	`mousedown` when a mouse button is pressed; `mouseup` when a mouse button is released.	`element.addEventListener("mousedown", fn)`	`window.addEventListener("mousedown", startMove);`
mousemove	Fires continuously whenever the mouse pointer moves inside an element.	`element.addEventListener("mousemove", fn)`	`canvas.addEventListener("mousemove", drawCurve);`
mouseenter / mouseleave	Fire when the mouse enters or leaves an element (does NOT bubble to child elements).	`element.addEventListener("mouseenter", fn)`	`wrapper.addEventListener("mouseenter", showToolbar);`
mouseover / mouseout	Similar to enter/leave, but they bubble (triggering also when moving onto child elements).	`element.addEventListener("mouseover", fn)`	`menu.addEventListener("mouseover", openSubmenu);`
contextmenu	Fires when the mouse is right-clicked (before the system context menu appears).	`element.addEventListener("contextmenu", fn)`	`area.addEventListener("contextmenu", (e) => e.preventDefault());`
→ Keyboard Events
keydown	Fires the moment the user presses any key on the keyboard.	`element.addEventListener("keydown", fn)`	`inputField.addEventListener("keydown", (e) => { if(e.key === "Enter") search(); });`
keyup	Fires when the user releases a pressed key on the keyboard.	`element.addEventListener("keyup", fn)`	`searchBox.addEventListener("keyup", filterResults);`
keypress	(Deprecated, use keydown instead) Fired when a key that produces a character value was pressed.	`element.addEventListener("keypress", fn)`	`inputField.addEventListener("keypress", fn);`
→ Form and Input Field Events
submit	Fires on a `<form>` element when the user submits a form.	`form.addEventListener("submit", fn)`	`form.addEventListener("submit", validateData);`
change	Fires when an element's value changes (for inputs, only upon loss of focus; for select, immediately).	`element.addEventListener("change", fn)`	`selectField.addEventListener("change", updatePrice);`
input	Fires IMMEDIATELY with every character typed into a field (perfect for real-time validation).	`element.addEventListener("input", fn)`	`passwordField.addEventListener("input", checkPasswordStrength);`
focus / blur	`focus` when a field gains focus (clicked into); `blur` when a field loses focus.	`element.addEventListener("focus", fn)`	`inputField.addEventListener("focus", highlightGreen);`
invalid	Fires when an element does not satisfy HTML5 validation constraints upon form submission.	`element.addEventListener("invalid", fn)`	`emailField.addEventListener("invalid", showError);`
→ Window / Document Events
DOMContentLoaded	Fires on the `document` when the initial HTML is completely loaded and parsed (does not wait for images/styles).	`document.addEventListener("DOMContentLoaded", fn)`	`document.addEventListener("DOMContentLoaded", initializeTutorial);`
load	Fires on the `window` when the complete page is FULLY loaded (including images and CSS).	`window.addEventListener("load", fn)`	`window.addEventListener("load", stopLoadingSpinner);`
resize	Fires on the `window` whenever the browser window size changes.	`window.addEventListener("resize", fn)`	`window.addEventListener("resize", adjustDisplay);`
scroll	Fires when the document view or an element has been scrolled up/down/sideways.	`element.addEventListener("scroll", fn)`	`window.addEventListener("scroll", updateScrollToTopBtn);`
7. Collections and Lists
forEach()	A method available on NodeList that allows easy traversal through all matched elements.	`nodelist.forEach(item => { ... })`	`btns.forEach(b => b.classList.add("style-class"));`
Array.from()	Converts a pseudo-array (HTMLCollection/NodeList) into a real array to use map/filter methods.	`Array.from(collection)`	`const array = Array.from(document.children);`
length	Returns the number of elements/nodes inside a collection.	`collection.length`	`console.log(rows.length);`

Key Practical Scenarios in Practice

In real-world web development, you will constantly encounter three specific challenges. Below are advanced examples prepared to solve these problems using optimal DOM methods:

Scenario / Issue	DOM Event Solution	Action
1. Page reloading upon form submission When clicking submit, the browser always reloads the entire page, which interrupts the user experience.	Using `e.preventDefault()` on the `submit` event, which allows data verification and background sending (AJAX).	▶ Code Example
2. Dynamically added elements do not react If you append rows or buttons later using JavaScript, classic event listeners will not trigger on them.	Event Delegation. We attach the listener to a common parent, and capture the click via `e.target`.	▶ Code Example
3. Real-time (live) input field verification The `change` event waits for a loss of focus, but users want feedback immediately.	Using the `input` event, which triggers on every single character typed (e.g., real-time password strength check).	▶ Code Example